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PREFACE 





随 着 智能 大 屏 设备 的 普及 ， 移 动 软件 产品 开发 成 本 的 降低 ， 相 关 领 域 的 大 型 公司 纷纷 成 立 了 移动 产 
品 设计 部 ，APP 创业 型 公司 也 如 雨后春笋 般 崛 起 ， 如 何 快速 地 把 市 场 需求 转化 成 产品 交互 框架 成 为 所 有 公 
司 的 迫切 需求 。 这 就 要 求 无 论 是 产品 经 理 、 程 序 员 ， 还 是 UI 界面 设计 人 员 ， 都 需要 学 习 相关 的 知识 。 传 
统 的 Axure RPPro 软件 虽然 是 一 个 非常 好 的 交互 流程 线 框 原 型 工具 , 但 是 如 果 没有 配套 的 业务 知识 来 支撑 ， 
那么 做 出 来 的 交互 将 会 不 够 实用 ， 商 业 性 也 不 强 。 本 书 用 一 种 新 的 思路 和 方式 来 阐述 产品 交互 与 动 效 表 达 
的 技术 与 方法 。 

本 书 从 零 开 始 ， 详 细 地 讲解 了 和 交互 有 关 的 实用 知识 ， 可 读 性 强 ， 注 重 逻辑 思维 培养 和 从 用 户 需 求 
角度 来 考虑 产品 功能 ， 帮 助 读者 快速 地 建立 起 自己 的 产品 交互 框架 。 同 时 ， 本 书 弥 补 了 市 场 上 相关 书籍 缺 
乏 的 现状 。 不 仅 讲 解 了 交互 方面 的 逻辑 思维 方法 ， 还 安排 了 大 量 交互 动 效 表达 的 案例 ， 具 体内 容 包 括 : 

第 1 ~ 5 章 分 别 讲解 交互 设计 是 什么 、 交 互 设计 师 必 备 知识 、 交 互 设计 工具 和 图 、 产 品 交 互 实用 文 
档 及 功能 分 类 、 交 互 设计 原则 等 ， 第 6、7 章 分 别 讲解 AE 基础 及 MG 动 效 、 酷 炫 插件 及 APP 动 效 ; 第 8 
章 讲解 响应 式 网 站 和 H5 动画 ;第 9 章 讲解 Sketch 学 习 捷径 ， 第 10 章 讲解 VR 虚拟 现实 ) 和 AR 增强 
现实 ) 交互 。 

本 书 还 赠送 MG 动 效 +APP 动 效 视频 小 动画 、260 分 钟 UI 交互 动 效 基础 操作 视频 、780 
分 钟 软件 教学 视频 、 教 学 用 PPT 课件 以 及 全 书 案例 素材 文件 ， 除 此 之 外 ， 还 有 专业 团队 为 读 
者 答疑 解 惑 ， 方 便 读者 学 习 。 








本 书 售后 


UEgood 优 蝶 教育 有 着 近 20 年 IT、 计 算 机 图 形 图 像 和 艺术 设计 领域 相关 图 书 的 编写 经 验 ， 善 于 提炼 
知识 内 容 ， 总 结 教学 方法 ， 将 实用 的 技术 和 职业 技能 用 高 效 、 快 捷 的 方式 传授 给 需要 的 用 户 。 

本 着 “学 习 ， 使 人 进步 ”的 信仰 ， 秉 承 “ 授 人 以 鱼 ， 不 如 授 之 以 渔 ”的 核心 教育 思想 ， 通 过 “ 教 、 学 、 
产 、 研 、 人 ”五 位 一 体 的 裂变 规模 化 发 展 思路 做 好 良心 教育 工程 。 

我 们 不 仅仅 是 传道 授 业 解 惑 者 ， 更 是 学 习 、 生 活 的 良好 组 织 者 和 促进 者 。 

依托 现 有 的 约 10000 名 一 线 资深 设计 师 、2000 名 大 学 老师 、3000 个 互联 网 企业 、400 个 动漫 与 设计 
公司 资源 ， 欲 打造 50 个 精品 教学 网 点 ， 实 现 真 正 的 “ 教 、 学 、 产 、 研 、 人 ”一 体 化 构想 。 

目前 开设 UVUE 设计 精品 必修 班 、UIUE 设计 高 级 研修 班 、UI 运营 插画 必修 班 、UI 交互 动 效 必修 班 、 
VR 虚拟 现实 项 目 实 训 班 、HTML 5 前 端 工程 师 必 修 班 、 产 品 经 理 必修 班 、 游 戏 原画 美术 必修 班 、 影 视 动 
画 全 能 就 业 班 等 系列 课程 。 

图 书 交流 QQ 群 ，387689345。 我 们 将 竭诚 为 您 服务 。 有 技术 疑问 随时 联系 QQ 1959595357。 

欢迎 大 家 登录 我 们 官网 www.uegood.com 获取 更 多 的 学 习 资 料 和 资源 。 














/视频 小 动画 导读 / 


AE 基础 及 MG 动 效 酷 炫 插 件 及 APP 动 效 

















6.1 AE 基 础 动画 7.1 酷 炫 插件 
6.1.1 “导入 素材 输出 格式 了 es 
6.1.2 ”动态 二 维 码 的 5 个 属性 ( 视频 小 动画 ) 7.1.2 樱花 天 气 
6.1.3 ”常用 工具 栏 及 摄像 机 功能 7.1.3 “宇宙 星空 上 上 ( 视频 小 动画 ) 
6.1.4 GIF 生成 7.1.4 ”山川 天 气 
6.2 MG 动 效 7.2 APP 动 效 
6.2.1 “海豚 动态 二 维 码 | 
6.2.2 ” 微 信 图 标 修剪 动画 一 | Se ee 
6.2.3 ”水 滴 融 合 动 画 72.4 加 载 刷新 (J 动 画 ) 
6.2.4 ”小 球 组 字 
6.2.5” 蒙 版 水 波 Cl 
6.2.6 ”鲤鱼 路 径 动画 人 
6.2.7 “汉堡 走路 上 (视频 小 动画 ) 
6.2.8 烟花 
6.2.9 ”几何 变形 动画 
6.2.10 边 角 定 位 
6.2.11 模糊 动画 
6.2.12 发 光 





/视频 说 明 / 


本 书 除了 提供 部 分 案例 视频 小 动画 外 , 还 提供 了 多 媒体 教学 视频 , 视频 包括 书 中 第 6 章 和 第 7 
章 的 具体 操作 方法 案例 的 制作 过 程 。 


/下 载 说 明 / 
本 书 赠送 的 教学 视频 、 案 例 素 材 文件 和 视频 小 动画 以 下 载 的 方式 提供 给 读者 , 读者 可 扫描 封底 
下 方 刊 刊 卡 二 维 码 获得 相关 资源 , 也 可 通过 关注 UEgood 公众 号 获得 相关 资源 。 
除了 本 书 赠送 的 资源 外 , 在 UEgood 公众 号 中 , 我 们 还 会 不 停 更 新 资源 包 , 读者 在 UEgood 公 
众 号 中 回复 "UI 动 效 必修 课 " 关键 词 , 可 以 随时 看 到 行业 需要 的 最 新 资源 。 
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9.2.4 使 用 Sketch 进行 UI 界 面 设计 实例 .pe 253 
Sketch 渐 入 佳境 一 一 图 标 


9.3.1 布尔 运算 
9.3.2 实例 一 : 搜索 图 标的 绘制 … 
9.3.3 实例 二 : 星星 的 绘制 
Sketch 大 师 之 路 一 一 插件 
Sketch 的 切 图 、 导 出 和 资源 推荐 … 
9.5.1 Sketch 的 切 图 
9.5.2 ”Sketch 的 导出 
9.5.3 ”Sketch 的 导出 小 技巧 
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L025] “WR 发 及 前 对 Do 281 
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VR 项 目 设计 流程 及 应 用 领域 … 287 
1051 WR 用 议 计 流 粒 玉 sneerni 287 


10.5.2 VR 应 用 领域 
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本 章 将 讲解 人 机 交互 设计 概念 、 交 互 设计 的 起 源 、 交 互 设计 发 展 史 、 产 品 相 关 
岗位 职能 、 中 国 交 互 设 计 师 的 状态 、 公 司 体制 对 交互 设计 师 的 影响 及 创业 公司 的 崛 
起 带 来 的 新 机 遇 。 





























@ 1.1 人 机 交互 设计 概念 


所 谓 人 机 交互 ， 即 HCI (Human Computer Interaction) ， 基 于 集 设 计 、 评 估 和 执 
行 功 能 于 一 身 的 交互 式 计算 系统 ， 研 究 由 此 而 发 生 的 相关 现象 的 多 学 科 交 叉 技 术 ， 
涉及 人 机 的 任务 分 派 、 人 机 通信 系统 的 架构 、 人 使 用 机 器 的 能 力 、 人 机 交互 界面 的 
算法 和 规划 及 编程 、 人 机 交互 系统 的 设计 与 实现 工程 、 界 面 的 规范 与 设计 和 执行 的 
处 理 过 程 ， 以 及 设计 协议 等 。HCI 主要 包含 5 个 方面 的 主题 : 人 机 交互 的 特性 、 计 

机 的 相关 性 、 人 的 特性 、 计 算 机 系统 和 界面 架构 ， 系 统 开发 的 规范 和 过 程 。 

人 机 交互 界面 涉及 的 学 科 如 图 1.1 所 示 。 



































































































































其 对 应 的 中 文 翻译 如 下 : 

Cognitive psychology 一 一 认 知 心理 学 

Neuroscience 一 一 神经 科学 

Ergonomics (human factors) 一 一 人 类 工程 学 (人 性 因素 ) 
Engineering 一 一 工程 学 


Design 一 一 设计 
Anthropology 一 一 人 类 学 
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Sociology 一 一 社会 学 

Philosophy 一 一 哲学 

Linguistics 一 一 语言 学 

Artificial intelligence 一 一 人 工 智能 
Computer science 一 一 计算 机 科学 


@ 1.2 产品 相关 的 各 种 岗位 职能 


1. 产品 经 理 〈Product Manager) 

产品 经 理 是 企业 中 专门 负责 产品 管理 的 职位 ， 产 品 经 理 负责 调查 并 根据 用 户 的 
需求 确定 开发 何 种 产品 、 选 择 何 种 技术 和 商业 模式 以 及 市 场 预 估 ， 并 向 决策 层 申请 
项 目 资金 等 。 推 动 相 应 产品 的 开发 组 织 ， 根 据 产 品 的 生命 周期 来 协调 研发 、 营 销 、 
运营 ， 确 定 和 组 织 实 施 相应 的 产品 策略 ， 捕 捉 用 户 新 需求 ， 和 迭代 产品 以 提高 产品 竞 
争 力 ， 以 及 其 他 一 系列 相关 的 产品 管理 活动 。 


2. 交互 设计 师 (Interaction Designer) 

交互 设计 师 是 一 个 承上启下 的 职位 ， 交 互 设计 师 负 责 对 产品 经 理 的 需求 文档 进 
行 整理 及 重 塑 , 按 产 品 功能 及 开发 系统 平台 框架 结构 , 定义 信息 架构 , 梳理 结构 流程 、 
功能 拓扑 及 跳 转 逻辑 顺序 ， 补 充 开发 所 需 的 软件 功能 细节 定义 ， 简 洁 优化 操作 流程 。 
界面 设计 师 应 该 是 能 充分 理解 产品 的 功能 定义 且 能 用 自己 的 创意 作出 让 人 眼前 一 亮 
的 视觉 作品 的 人 ， 并 且 可 以 引导 用 户 更 顺利 地 完成 操作 任务 ， 突 出 信息 重点 ， 是 能 
提高 商业 转化 率 的 有 思想 、 有 技术 、 有 审美 的 优秀 界面 绘制 人 员 。 

当然 ,一 个 产品 团队 还 会 有 前 端 工程 师 、 后 端 开发 、 数 据 库 、 运 营 、 市 场 等 岗位 。 

如 果 你 是 一 名 UI 视觉 设计 师 ， 在 项 目 中 遇 到 以 下 7 种 人 会 很 幸运 ! 

(1) 提供 和 项 目 有 关 的 设计 大 方向 的 人 。 

(2) 提供 市 场 上 优秀 竞 品 参考 的 人 。 

(3) 跨 界 把 优秀 创意 点 子 吸纳 进项 目的 人 。 

(4) 作 大 方向 视觉 稿子 可 把 素材 揉 捏 在 一 起 的 人 。 

(5) 踏 踏实 实 执行 查 缺 补漏 设计 的 人 ， 提 高 完整 性 。 

(6) 盯 着 程序 执行 不 偷懒 的 人 。 

(7) 告 之 你 项 目 进度 和 资金 ， 以 及 系统 里 的 “ 坑 ” 及 程序 实现 成 本 的 人 。 
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@@ 2.1 交互 设计 师 常用 工具 


交互 设计 师 常 用 工具 大 致 包括 Axure、Justinmind、Mockplus、Balsamiq Mockups、 
Mindmanager、OmniGraffle、Visio、Sketch、Illustrator、Fireworks、InVision、 
Office、PPT、Keynote、Photoshop、POP-Prototyping on Paper、After Effects 等 ， 软 件 





受 
































标 如 图 2.1 所 示 。 


Ca 
wen DO 
Office 


全 鳃 家 夯 国 加 加 


Balsamiq Mockups 


Keynote OmniGraffle 


Photoshop lllustrator After Effects 


水 国 轩 DMGO 


Axure POP-Prototyping on Paper InVision 


虽然 原型 工具 很 多 ， 








Visie Wockplu Windnanager PPT 


图 2.1 








但 目前 在 








中 国 被 普遍 使 用 的 应 该 是 Axure 和 PPT 了， 其实 
































交互 设计 师 所 使 用 的 工具 是 不 受 限 制 的 ， 只 要 交付 物 可 以 准确 表达 项 目 需求 即 可 。 
果 是 大 项 目 ， 应 尽量 使 用 团队 内 


如 


种 交互 文档 和 示意 图 及 动 效 
无 论 设 计 何 种 产品 ， 设 计 师 首先 要 知道 产品 的 硬件 平台 、 外 观 硬件 、 输 入 输出 、 









































通用 的 工具 格式 。 如 果 有 时 间 的 话 ， 应 尽量 把 各 























日 节 都 表达 清楚 。 





























反馈 元 器 件 , 然后 要 了 解 操作 界面 的 分 辩 率 物理 显示 面积 、 用 户 使 用 产品 设备 的 场景 、 
操作 界面 会 用 到 的 各 种 操作 姿势 和 手势 、 网 络 连接 方案 及 速度 、 开 发 的 操作 系统 框架 
以 及 数据 库 支 持 能 力 。 









































@@ 2.2 产品 硬件 平台 
产品 硬件 平台 包括 以 下 几 种 。 



































(2) 网 站 及 网 络 应 


(3) 手机 、 数 码 相机 、 
(4) AR Glass、VR 头盔 、 可 突 








(5) 车 载 导航 、 飞 机 


(6) TV 机 项 盒 、 游 戏 3 








平板 电 





仪表 等 。 












































脑 等 移动 设备 。 
穿戴 设备 。 


机 、 家 庭 影 院 、 投 影 仪 等 。 


005 


UI 交互 动 效 必修 课 





(7) 公共 设施 ， 如 交互 触摸 屏 、 提 款 机 、 自 


动 取 票 系统 等 。 


(8) 专业 设备 、 医 疗 仪器 设备 及 科研 设备 等 。 





部 分 图 标 如 图 2.2 所 示 。 


@ 2.3 信息 架构 学 


IA 全 称 为 Information Architecture， 中 文 叫 


“信息 架构 ”， 其 模型 如 图 2.3 所 示 。 


信息 架构 ， 通 俗 地 讲 就 是 将 复杂 的 信息 通过 
整理 归 类 等 手法 ， 简 洁 明 了 地 传递 给 


和 方法 

















设置 站 点 间 页 面 如 何 互动 。 








作为 一 个 领域 集合 ，IA 注重 于 尽 可 能 方便 用 





网 站 的 信息 架构 是 用 来 描述 一 个 网 站 上 的 内 
容 和 信息 的 语义 布局 的 总 称 。 它 指 的 是 信息 的 组 
织 ， 包 括 处 理 一 个 网 站 的 结构 布局 ， 制 定 哪些 页 
面 去 向 哪里 或 什么 样 的 内 容 在 哪个 页 面 上 ， 以 及 




















用 户 的 技术 











户 找 到 他 们 正在 寻找 的 内 容 ， 提 高 转换 率 。 


1, 信息 架构 师 的 职责 


(1) 组 织 梳理 数据 的 内 在 关系 ， 使 复杂 的 信息 变 得 有 条 理 。 
〈2) 创建 信息 呈现 结构 或 站 点 地 图 ， 应 用 各 模块 关系 拓扑 图 。 
(3) 单 页 内 的 内 容 模块 的 优先 级 ， 页 面 指示 及 阅读 路 径 。 





2. 为 何 要 有 信息 架构 











(1) 使 用 户 更 有 效率 地 找到 和 搜索 到 自己 想 要 的 信息 。 











(2) 使 信息 呈现 更 有 条 理 ， 便 于 
(3) 使 数据 及 信息 的 层级 清晰 ， 
3. 信息 空间 

















后 期 更 新 维护 。 
义 便于 底层 功能 开发 和 表现 形式 分 开 管理 。 








信息 空间 组 织 、 导 航 、 交 互 和 流动 。 


4. 常见 的 信息 结构 呈现 形式 
〈1) 扁平 化 层级 浅 。 
(2) 竖 直 型 层级 深 。 
(3) 复杂 类 混合 型 。 





























常见 的 信息 结构 呈现 形式 如 图 2.4 所 示 。 








5. 影响 信息 架构 呈现 形式 的 因素 














产品 的 定义 及 核心 价值 、 内 容 的 数量 、 呈 现 结构 、 内 容 的 关联 性 、 用 户 使 用 场景 、 
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用 








内 容 的 使 用 频率 、 着 陆 页 和 入 口 ， 以 及 搜索 型 网 站 一 般 采 用 垂直 型 。 












































扁平 化 层级 浅 
竖 直 型 层级 深 复杂 类 混合 型 
2.4 


信息 架构 工作 流程 如 图 2.5 所 示 。 





有 平台 浏览 器 测试 

嫩 录 页 而 图 入 缚 本 nem | 地 化 
/ | 本 提交 搜索 引 区 
| | \e |/ 
\ AN\ | 


nd 






9 
\ 


\ \ 
初次 会 议 |/ en 
网 站 大 纳 审 查 | \ 内 页 图 入 复审 


\ 
最 终审 查 








里 和 碑 et 
普通 
里 程 碑 发 生 更 大 
图 2.5 


@ 2.4 ”用户 角 色 建 模 


Persona 是 用 户 模型 的 简称 ， 是 虚构 的 一 个 用 户 ， 用 来 代表 一 个 用 户 群 。 根 据 你 
的 业务 、 产 品 、 流 程 、 功 能 构建 你 的 用 户 模型 元 素 。 用 户 模型 的 元 素 通常 基于 人 

























































































UI 交互 动 效 必修 课 


统计 特征 〈 如 性 别 、 年 龄 、 职 业 、 收 入 ) 和 消费 心理 ， 分 析 消费 者 的 兴趣 特征 和 使 
及 购买 产品 的 行为 。 创 建 用 户 模型 的 
的 是 尽 可 能 减少 主观 膀 测 ， 理 解 用 户 


到 底 真正 需要 什么 ， 站 在 用 户 的 角度 分 AO 
析 问 题 ， 还 原 场景 中 产生 的 真实 需求 ， 全 全 
从 而 知道 如 何 更 好 地 为 不 同类 型 用 户 
了 a2RR 
如 图 2.6 所 示 ， 可 以 组 成 一 个 用 户 
模型 的 元 素 有 成 千 上 万 个 ， 所 以 我 们 应 忆 a 
图 2.6 


当 围 绕 自身 的 产品 去 提炼 元 素 特 征 ， 对 

本 产品 无 关 的 影响 因素 ， 可 以 排除 在 建 

模 元 素 以 外 ， 而 且 除 基本 信息 外 ， 再 按照 对 产品 影响 权重 的 不 同 ， 把 影响 最 大 的 因 
素 先 列 出 来 ， 影 响 小 的 因素 筛选 一 些 排 在 后 面 ， 几 乎 没有 影响 的 因素 可 以 去 掉 ， 
户 描述 构成 元 素 尽 量 不 要 超过 30 个 。 

Lene Nielsen 的 “十 步 人 物 角色 法 ”， 如 图 2.7 所 示 。 


增强 从 分 析 到 规格 需求 的 过 程 。 
采用 叙事 方式 并 参与 人 物 角色 。 2. 构建 假设 3. 验证 


vy 各 二 






































(性 





































































































































































































































10. 持续 发 展 


4. 发 现 模式 


9. 创建 场景 


5 构建 角色 bss 


8. 传播 知识 


Ee 


6. 定义 情境 
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1. 发 现 用 户 〈Finding the Users) 











目标 : 谁 是 用 户 ? 有 多 少 ? 他 们 对 品牌 和 系统 做 了 什么 ? 
使 用 方法 : 数据 资料 分 析 。 
输入 物 : 报告 。 


2. 构建 假设 (Construction Hypothesis) 
目标 : 用 户 之 间 的 差异 都 有 什么 ? 
使 用 方法 : 查看 一 些 材料 ， 标 记 用 户 人 群 。 
输出 物 ， 大致 描绘 出 目标 人 和 群 。 


3. 验证 (Verification) 
目标 : 关于 Persona 的 调研 (喜欢 /不 喜欢 、 内 在 需求 、 价 值 ) ， 关 于 场景 
































的 调研 《工作 地 环境 、 工 作 条 件 ) ， 关 于 剧情 的 调研 〈 工 作 策略 和 目标 、 信 息 策 略 


和 目 








标 ) 。 
使 用 方法 : 数据 资料 收集 。 
输出 物 : 报告 。 


4. 发 现 模式 〈Finding Patterns) 

目标 : 是 否 抓 住 重要 的 标签 ? 是 否 有 更 多 的 用 户 群 ? 是 否 同等 重要 ? 
使 用 方法 : 分 门 别 类 。 

输出 物 : 分 类 描述 。 


5. 构建 角色 〈Constructing Personas) 
目标 : 基本 信息 〈 姓 名 、 性 别 、 照 片 ) ， 心 理 外向、 内 向 ) ， 背 景 (职业 ) ; 





对 待 技术 的 情绪 与 态度 ， 其 他 需要 了 解 的 方面 ， 个 人 特质 等 。 


使 用 方法 : 分 门 别 类 。 

输出 物 : 类 别 描述 。 

6. 定义 情境 (Defining Scenarios) 

目标 : 在 设 定 的 场景 中 、 既 定 的 目标 下 ， 当 Persona 使 用 品牌 技术 的 时 候 会 发 生 


什么 ? 


使 用 方法 : 叙述 式 剧情 ， 使 用 Persona 描述 和 场景 形成 剧情 。 
输出 物 ， 剧情、 用 户 案 例 、 需 求 规格 说 明 。 


7. 验证 和 购买 (Validation and Buy-In) 

问 : 你 知道 有 人 喜欢 这 个 吗 ? 

使 用 方法 : 知道 的 人 对 人 物 角色 的 描述 阅读 和 评论 。 
8. 传播 知识 (Dissmination of Knowledge) 

问 : 我 们 如 何 与 组 织 共享 角色 ? 
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使 用 方法 促进 会 议 、 电 子 邮件 、 每 一 种 活动 、 事 件 。 


9. 创 
目标 


建 场景 (Defining Situations) 
: 这 种 Persona 的 需求 适应 哪 种 场景 ? 














使 


方法 : 寻找 适合 的 场景 。 





输出 


物 : 需求 和 场景 的 分 类 。 


10. 持续 发 展 (On-going Development) 


问 : 
使 用 
文件 
需要 














没有 新 的 信息 改变 角色 吗 ? 

方法 : 可 用 性 测试 ， 新 的 数据 。 

制作 : 由 专人 根据 访谈 的 用 户 进行 角色 数据 输入 。 
使 用 到 Persona 的 场景 示意 如 图 2.8 所 示 。 


制定 市 场 策略 时 


Se 
人 


2.8 


这 些 方面 我 们 都 需要 使 用 到 用 户 模型 。 所 以 说 ， 用 户 模型 是 贯穿 产品 设计 整个 
流程 的 一 个 非常 有 用 的 工具 ， 它 可 以 用 来 衡量 我 们 的 决策 是 否 符合 目标 用 户 ， 并 基 


于 角色 归 





纳 调整 。 


@@ 2.5 流程 图 符号 意义 
2.5.1 流程 图 符号 


(1) 
作用 
(2) 
作用 
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和 珑 形 

: 一 般 表示 要 执行 的 处 理 (Process) ， 在 程序 流程 图 中 用 作 执 行 框 。 
贺 角 矩形 或 者 扁 圆 

: 表示 程序 的 开始 或 者 结束 ， 在 程序 流程 图 中 用 作 开始 框 或 者 结束 框 。 





(3) 斜 角 和 矩形 

作用 : 表示 数据 ， 其 中 可 注 明 数据 名 、 来 源 、 用 途 或 放置 其 他 的 文字 说 明 。 
(4) 菱形 

作用 : 表示 决策 或 判断 (例如 If、Then、Else) ， 在 程序 流程 图 中 用 作 判 别 框 。 


(5) 文件 
作用 : 表示 为 一 个 文件 ， 可 以 是 生成 的 文件 或 是 调用 的 文件 ， 需 要 自己 根据 实 














际 情况 作 解 释 。 


(6) 括 弧 
作用 : 注释 或 者 说 明 ， 也 可 以 用 作 条 件 叙 述 。 一 般 流程 到 某 一 位 置 ， 需 作 一 段 














执行 说 明 ， 或 者 有 特殊 行为 时 会 用 到 它 。 


(7) 半圆 形 

作用 : 在 使 用 中 常 作为 流程 页 面 跳 转 、 流 程 跳 转 的 标记 。 
(8) 三 角形 

作用 : 控制 传递 ， 一 般 和 线条 结合 使 用 ， 表 明 数 据 传递 方向 。 
(9) 梯形 


作用 : 一 般 用 作 手 动 操作 。 


(10) 椭圆 形 或 圆 形 
作用 : 如 果 画 小 圆 ， 一 般 用 来 表示 按 顺 序数 据 的 流程 。 如 果 是 画 椭圆 形 ， 通 党 


用 作 流 程 的 结束 。 如 果 是 在 Use case 用 例 图 中 ， 椭 圆 就 是 一 个 用 例 了 。 


(11) 六 边 形 

作用 : 表示 准备 之 意 ， 通 常用 作 流 程 的 起 始 ， 类 似 开始 框 。 

(12) 平行 四 边 形 

作用 : 一 般 表示 数据 ， 或 确定 的 数据 处 理 ， 或 者 表示 资料 输入 (Input) 。 

(13) 角色 

作用 : 来 自 于 Use case 用 例 ， 模 拟 流程 中 执行 操作 的 角色 。 需 要 注意 的 是 ， 角 


色 并 非 一 定 是 人 ， 有 时 候 是 机 器 自动 执行 ， 有 时 候 也 可 以 是 模拟 一 个 系统 管理 。 


(14) 数据 库 

作用 : 指 保存 网 站 数据 的 数据 库 。 

(15) 图 片 

作用 : 表示 一 张 图 片 ， 或 者 置 入 一 个 已 经 画 好 的 图 片 、 流 程 或 者 一 个 环境 。 
流程 图 符号 如 图 2.9 所 示 。 
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口 局 Dao DO 


矩形 ”层叠 矩形 圆 角 和 矩形 层 径 圆 形 斜 角 和 矩形” 菱形 文件 


和 [] 全 AD CO 


层 到 文件 ” 括 弧 半 国 形 ”三 角形 ”梯形 ”椭圆 形 ”六 边 形 


口 从 日 国 


平行 四 边 形 角色 数据 库 。 图 片 









































图 2.9 
2.5.2 ”其 他 符号 
(1) 直线 
直线 表示 控制 流 的 流 线 ， 可 以 加 箭头 表示 流向 ， 也 可 自 定义 。 
(2) 虚线 
虚线 用 于 表明 被 注解 的 范围 或 连接 被 注解 部 分 与 注解 正文 ， 如 图 2.10 所 示 。 
(3) 省 略 符 

















若 流程 图 中 有 些 部 分 无 需 给 出 符号 的 具体 形式 和 数量 , 可 用 三 点 构成 的 省 略 符 ， 
如 图 2.11 所 示 。 


(4) 并 行 方式 
对 平行 线 表示 同步 进行 两 个 或 两 个 以 上 并 行 方式 的 操作 ， 如 图 2.12 所 示 。 


J = = 


Le CD CD LE 
一 … 一 |-| -一 





























注解 符 的 使 用 省 略 符 的 使 用 并 行 方式 示例 
图 2.10 图 2.11 图 2.12 


@ 2.6 手势 与 标签 


一 般 来 说 ， 同 一 张 流程 图 上 会 有 很 多 标注 ， 如 果 在 注解 中 写 不 下 ， 可 以 用 彩色 
小 标签 编 上 数字 ， 然 后 在 专门 的 注释 中 ， 在 对 应 的 编号 数字 里 把 注释 说 明文 字 补 全 。 
手势 与 标签 图 标 如 图 2.13 所 示 。 
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ee i ~、 
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CF 于 全 
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eoooo000 A | 
kn T | 
| 
图 2.13 


@@ 2.7 网 站 线 框图 的 信息 层级 


网 站 项 部 的 全 局 导航 ， 左 侧 的 二 级 导航 ， 以 及 模块 内 的 局 部 导航 ， 构 成 一 个 三 
维 的 、 有 逻辑 联系 的 信息 架构 ， 如 图 2.14 所 示 。 


























图 2.14 


@@ 2.8 APP 信息 层级 


一 个 APP 通常 从 启动 器 图 标 进入 〈 也 有 可 能 是 其 他 着 陆 页 ) ， 通 过 启动 页 ， 然 
后 就 到 了 首页 或 者 导航 页 。 
而 页 面 上 也 会 有 导航 、 内 容 不 同 板块 、Bar 条 等 模块 ， 不 同 模块 的 信息 级 别 都 不 
同 。 每 个 模块 的 层级 及 位 置 都 有 讲究 ， 我 们 在 设计 时 ， 也 要 考虑 到 常用 功能 应 放 到 
容易 找到 的 位 置 ， 重 要 功能 应 做 得 比较 醒目 一 些 ， 内 容 也 要 注意 布局 的 合理 ， 应 适 
合 于 当前 模块 的 信息 传达 ， 如 图 2.15 所 示 。 
到 2.16 所 示 为 当前 操作 模块 激活 状态 ， 这 个 页 面 有 非常 多 的 信息 ， 为 安排 好 常 
功能 和 重要 功能 的 位 置 ， 因 此 需要 有 更 加 合理 的 布局 。 
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图 2.15 图 2.16 


通常 一 个 页 面 必然 会 有 一 个 最 重要 的 任务 功能 模块 ， 设 计 师 需要 在 线 框 布局 
和 界面 用 色 造 型 方面 着 重 强调 ! 流程 线 框 卡片 有 助 于 设计 师 完成 这 项 工作 。 若 不 想 
选用 这 套 卡片 ， 我 们 也 可 以 通过 AI 和 Axure 绘制 适合 自己 的 流程 线 框 卡片 。www. 
uxflowcharts.com 这 个 网 站 提供 了 电子 版 的 功能 最 简化 的 线 框 流程 模板 , 如 图 2.17 所 示 。 





































































































COLOR STYLE SITE FLOWCHART ON DARK BACKGROUND 


projtcrs 
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”交互 设计 工具 和 图 





@ 3.1 常见 交互 操作 事件 





Axure 交互 由 3 个 基本 的 信息 单元 组 成 ， 即 When、Where 和 What。 
(1) When。 什 么 时 候 发 生 交互 动作 。 


在 Axure 术语 中 ， 用 事件 (Events) 来 表示 et OnContextMenu 
When。 例 如 ， 当 浏览 器 中 加 载 页面 时 ， 或 嘿 omrextchange OnMouseDown 
用 户 单 击 、 拖 息 一 个 控件 后 。 嘿 OnselectionChange OnMouseUp 


(2) Where。 交 互 在 发 生 的 位 置 。 可 只 oncheckedChange OnMouseMove 
建立 交互 动作 的 控件 。 例 如 ， 和 矩形 框 、 单 叶 OnPanceStateChange 。 OnMouseHover 


HH 





选 按钮 、 下 拉 列表 、 一 个 图 片 或 页 面 的 某 区 ct OntongClick 
个 热 区 等 。 嘿 OnDragDrop OnKeyDown 
(3) What。 会 发 生 什么 动作 (Actions)。 。 嘿 OnswipeLeft OnKeyUP 


动作 定义 了 交互 的 过 程 和 结果 。 例 如 ， 在。 辕 OnSwipeRight 


OnMove 
页 面 加 载 时 ， 将 一 个 动态 面板 的 坐标 设置 。 及 onLoad Oe 
到 某 一 个 位 置 。 OnSwioeUP 人 
在 “页 面 属性 和 样式 面板 ”区 域 的 “Page OnswipeDown 
Interactions 〈 页 面 交 互 事 件 ) ”选项 卡 中 ， Onscroll ee 
可 设置 某 个 页 面 的 所 有 的 页 面 交互 事件 ， OnResize es 
包括 但 不 仅 限于 如 图 3.1 所 示 的 内 容 。 轩 34 


选择 某 个 部 件 后 ， 在 “部 件 交互 和 注释 面板 ”区 域 的 “Interactions (部 件 交互 事 
件 ) ”选项 卡 中 ， 可 设置 该 部 件 的 所 有 部 件 事件 ， 有 些 事件 各 种 部 件 都 包括 ， 但 有 
些 部 件 只 是 针对 某 种 部 件 ， 部 件 事件 如 表 3.1 所 示 。 
表 3.1 










页 面 加 载 时 事件 
浏览 器 窗口 改变 大 小 时 
事件 
OnWindowScroll 浏览 器 窗口 滚动 时 事件 










OnPageLoad 


OnWindowResize 





在 调整 浏览 器 窗口 时 发 生 ， 可 多 次 发 生 
在 空白 区 域 ， 或 者 在 没有 添加 鼠标 单 击 时 事件 的 部 
件 上 进行 页 面 单 击 时 ， 将 会 发 生 该 事件 
在 空白 区 域 ， 或 者 在 没有 添加 鼠标 双击 时 事件 的 部 
件 上 进行 页 面 双击 时 ， 将 会 发 生 该 事件 
在 空白 区 域 ， 或 者 在 没有 添加 鼠标 右键 单 击 时 事件 
的 部 件 上 ， 进 行 单 击 右键 操作 ， 将 会 发 生 该 事件 
在 空白 区 域 ， 或 者 在 没有 添加 鼠标 移动 时 事件 的 部 
件 上 ， 进 行 鼠 标 移 动 操作 ， 将 会 发 生 该 事件 

在 空白 区 域 ， 或 者 在 没有 添加 键盘 按 下 时 事件 的 部 
件 上 ， 进 行 键盘 按 下 操作 ， 将 会 发 生 该 事件 





OnPageClick 页 面 单 击 时 事件 





OnPageDoubleClick 页 面 双击 时 事件 








OnPageContextMenu ”| 页 面 右键 单 击 时 事件 





OnPageMouseMove 鼠标 移动 时 事件 

















OnPageKeyDown 键盘 按键 按 下 时 事件 
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事件 名 称 


事件 说 明 





续 表 


备注 





OnPageKeyUp 


键盘 按键 弹 起 时 事件 


在 空白 区 域 ， 或 者 在 没有 添加 键盘 弹 起 时 事件 的 部 
件 上 ， 进 行 键盘 弹 起 操作 ， 将 会 发 生 该 事件 








OnAdaptiveViewChange | 自 适应 视图 更 改 时 事件 


其 对 应 全 部 解释 如 表 3.2 所 示 。 
CE 





当 切 换 到 另 一 个 视图 时 ， 发 生 一 次 该 事件 ， 可 以 多 
次 发 生 


表 3.2 
备注 









































OnClick 鼠标 单 击 时 事件 内 部 框架 部 件 、 中 继 器 部 件 不 包括 该 事件 
水 平 线 、 垂 直线 、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交 按 
Me 。 | 网 标 移入 出 襄 件 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
- 水 平 线 、 垂 直线 、 内 部 框架 部 件 、 中 继 吕 部件、 提交 按 
ss 如 标 移出 时 素 作 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
a 鼠标 在 部 件 上 移动 时 | 水 平 线 、 委 直线、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交接 
证 焕 事件 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
- 水 平 线 、 垂 直线 、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交 按 
OnContextMenu 。 | 鼠标 右键 单 击 时 事件 | gp 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
鼠标 按键 按 下 并 且 没 | 水 平 线 、 垂 直线、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交 按 
人 有 释放 时 事件 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
- 水 平 线 、 垂 直线 、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交 按 
Oo 鼠标 按键 释放 时 事件 | 和 6 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
es 当 键 盘 上 的 按键 按 下 | 水 平 线 、 委 直线、 内 部 框架 部 件 、 中 继 器 部 件 、 提 交接 
呈 时 事件 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
证 当 鼠 标 在 部 件 上 悬 停 | Default 一 Common 下 部 件 ， 除 水 平 线 、 垂 直线 、 内 部 
0 ov | 超过 2 秒 时 事件 框架 部 件 、 中 继 器 部 件 外 ， 都 包括 该 事件 
i 鼠标 单 击 并 且 在 部 件 | Default 一 Common 下 部 件 ， 除 水 平 线 、 垂 直线 、 内 部 
ee 上 超过 2 秒 时 事件 。 | 框架 部 件 、 中 继 器 部 件 外 ， 都 包括 该 事件 
内 部 框架 部 件 、 中 继 器 部 件 、 提 交接 钮 部 件 、 树 、 表 格 、 
OnDoubleClick 鼠标 双击 时 事件 菜单 部 件 不 包括 该 事件 
当 键盘 上 的 按键 弹 起 | 水 平 线 、 委 直线 、 内 部 框架 部 件 、 中 继 嚣 部件 、 提 交 按 
Oo 时 事件 钮 部 件 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
OnMove 部 件 移动 时 事件 中 继 器 、 树 、 表 格 、 菜 单 部 件 不 包括 该 事件 
Default 一 Common 下 部 件 ， 除 水 平 线 、 垂 直线 、 内 部 
nhew 大 四 村 且 家 伯 框架 部 件 、 中 继 器 部 件 外 ， 都 包括 该 事件 
Default 一 Common 下 部 件 ， 除 水 平 线 、 和 直线、 内 部 
0 人 村 做 框架 部 件 、 中 继 器 部 件 外 ， 都 包括 该 事件 
OnFocus 部 件 获得 焦点 时 事件 | 中 继 器 、 提 交 按 钮 、 内 部 框架 部 件 不 包括 该 事件 
OnLosthoons 部 件 失去 焦点 时 事件 | 中 继 器 、 提 交 按 钮 、 内 部 框架 部 件 不 包括 该 事件 
OnTextChange 文本 值 改变 时 事件 。 ”| 输入 框 部 件 和 多 行文 本 框 部 件 包括 该 事件 
OnSeleotionChange | 选项 改变 时 事件 下 拉 列 表 和 列表 部 件 包括 该 事件 
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续 表 
































事件 名 称 事件 说 明 备注 
OnCheckedChange ”| 选中 状态 改变 时 事件 ”| 复 选 框 和 单 选 框 部 件 包括 该 事件 
OnPanelStateChange | 面板 状态 改变 时 事件 ”| 只 有 动态 面板 部 件 包括 该 事件 
OnDragStart 拖 动 开始 时 事件 只 有 动态 面板 部 件 包 括 该 事件 
同上 ， 在 一 次 OnDragStart 和 OnDragStop 事件 中 ， 可 能 
OnDrag 拖 动 时 事件 发 生 多 次 OnDrag 事件 
OnDragDrop 拖 动 结束 时 事件 只 有 动态 面板 部 件 包括 该 事件 
OnSwipeLeft 向 左 滑动 时 事件 只 有 动态 面板 部 件 包括 该 事件 ， 在 APP 中 比较 常用 
OnSwipeRight 向 右 滑动 时 事件 只 有 动态 面板 部 件 包括 该 事件 ， 在 APP 中 比较 常用 
OnSwipeUp 向 上 滑动 时 事件 只 有 动态 面板 部 件 包括 该 事件 ， 在 APP 中 比较 常用 
OnSwipeDown 向 下 滑动 时 事件 只 有 动态 面板 部 件 包括 该 事件 ， 在 APP 中 比较 常用 
OnLoad 部 件 加 载 时 事件 动态 面板 部 件 和 中 继 器 部 件 都 包括 该 事件 
动态 面板 部 件 发 生 水 
OnScroll 平 或 垂直 滚动 时 事件 只 有 动态 面板 部 件 包括 该 事件 
ee 只 有 动态 面板 部 件 包 括 该 事件 ， 如 通过 Set Panel Size 调 
OnResize oa 整 大 小 ， 或 者 设置 为 自 适应 内 容 属性 的 动态 面板 部 件 更 
换 状态 导致 尺寸 改变 时 发 生 





随 着 Axure 版 本 的 升级 ， 还 会 有 更 多 的 事件 加 入 功能 菜单 ， 我 们 的 想法 将 更 容 
易 实 现 。 


@ 3.2 头脑 风暴 和 思维 导 图 


1. 头脑 风暴 (Brain-storming) 

头脑 风暴 是 由 美国 人 奥 斯 本 提出 的 一 种 激发 集体 智慧 以 产生 创新 设想 的 思维 方 
法 。 指 一 群 人 (或 小 组 ) 围绕 一 个 特定 的 兴趣 或 领域 ， 进 行 创新 或 改善 ， 产 生 新 点 子 ， 
提出 新 办 法 。 


2. 会 前 准备 工作 

(1) 小 组 人 数 一 般 为 10 一 15 人， 时 间 一 般 为 20 ~ 60 分 钟 。 

(2) 设 主持 人 一 名 ， 主 持 人 只 主持 会 议 ， 对 设想 不 做 评论 。 设 记录 员 1 ~ 2 人 ， 
要 求 认真 将 与 会 者 的 每 一 设想 ， 不 论 好 坏 都 完整 地 记录 下 来 。 

(3) 会 议 要 明确 主题 ， 会 议 主 题 提 前 通报 给 与 会 人 员 ， 让 与 会 者 有 一 定 准备 。 

(4) 为 了 不 浪费 时 间 和 快速 进入 状态 ， 可 以 轮流 让 每 人 说 一 个 想法 ， 这 样 不 会 
冷场 。 

3. 注意 事项 

(1) 围绕 主题 、 自 由 畅谈 、 延 迟 评判 、 禁 止 批评 、 追 求 数量 。 

(2) 对 各 种 意见 、 方 案 的 评判 必须 放 到 最 后 阶段 ， 此 前 不 能 对 别人 的 意见 提 H 



































上 
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批评 和 评价 。 
(3) 认真 对 待 任何 一 种 设想 ， 而 不 管 其 是 否 适当 和 可 行 。 
(4) 没有 建议 时 说 “过 ”， 不 要 相互 指责 。 
(5) 目标 集中 ， 追 求 设想 数量 ， 越 多 越 好 。 
(6) 鼓励 巧妙 地 利用 和 改善 他 人 的 设想 ， 提 升 创造 力 。 
(7) 突出 求 异 创新 ， 这 是 智力 激励 法 的 宗旨 。 


4. 思维 导 图 (Mindmap) 

思维 导 图 又 称 脑 图 ， 是 一 种 图 像 式 思 维 的 工具 ， 一 种 利用 图 像 的 思考 辅助 工具 。 
思维 导 图 是 使 用 一 个 中 央 关 键 词 或 想法 以 辐射 线形 或 连接 所 有 的 代表 字 词 、 想 法 、 
任务 或 其 他 关联 项 目的 图 解 方式 。 

思维 导 图 在 产品 领域 常用 在 构建 框架 、 产品 场景 需求 思考 、 功能 思考 、 阅读 笔记 、 
细 化 分 支 、 内 容 归 档 ， 以 及 处 理 杂项 等 工作 中 。 

常用 思维 导 图 软件 包括 Mindmanager、Xmind、iMindMap、FreeMind、MindMapper、 
NovaMind、 百 度 脑 图 等 。 

思维 导 图 示例 如 图 3.2 所 示 。 















1. 开 始 在 一 个 空白 的 横向 页 面 的 中 心 ， 
网 理想 地 用 一 幅 彩 色 图 像 来 表示 你 的 主题 。 


2. 在 整个 地 图 中 使 用 字 词 和 图 片 。 
尽 可 能 使 用 单个 关键 字 ， 沿 着 一 个 分 支 ， 
每 个 词 或 图 片 都 在 其 自己 的 分 支 上 。 
4. 实验 以 不 同 的 方式 连接 和 强调 不 同方 面 。 热 像 仪 
根据 需要 使 用 荧光 笔 、 代 码 和 箭头 。 





始终 确保 线 连接 到 前 一 水 平 线 的 末端 。 
通常 线 在 中 心 时 更 粗 ， 越 远 则 越 细 。 


3.2 


@ 3.3 ”交互 设计 师 画 的 7 种 图 


1. 物理 业务 流程 图 

当 线 下 传统 业务 向 线 上 迁移 的 时 候 ， 我 们 就 需要 对 物理 业务 进行 建 模 ， 比 如 原 
来 的 部 门 有 一 些 什么 业务 流程 ? 如 何 拆 分 或 合并 业务 流程 ， 流 程 中 会 涉及 哪些 对 象 
和 接口 人 ， 他 们 负责 处 理 什么 任务 ， 等 等 。 先 理 清 业务 需求， 看 哪些 业务 是 在 线 上 也 
需要 的 , 哪些 是 可 以 省 略 合 并 的 , 然后 取舍 , 总结 出 一 套 适合 软件 产品 的 业务 流程 图 ， 
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包括 定义 一 些 数据 字段 的 属性 和 上 下 边界 值 等 。 
物理 业务 流程 图 如 图 3.3 所 示 。 


客户 销售 


日 志 采 购 订单 ， 








接 订单 
日 志 装 运 





2. 站 点 功能 拓扑 图 

一 个 站 点 或 一 个 产品 的 功能 模块 拓扑 包括 导航 、 频 道 、 类 目 、 功 能 块 等 组 织 结 
构 之 间 的 关系 。 

影响 一 个 站 点 的 功能 拓扑 图 的 结构 因素 是 这 个 产品 的 核心 特色 、 用 户 常用 功能 ， 
以 及 功能 块 之 间 的 逻辑 性 等 。 

优秀 的 功能 拓扑 结构 有 两 方面 的 意义 : 一方 


面 是 方便 用 户 在 浏览 页 面 时 通过 链接 跳 转 到 相关 页 
面 ， 另 一 方面 是 方便 搜索 引擎 的 蛛 让 虫 抓 取信 息 。 
功能 拓扑 图 如 图 3.4 所 示 。 
3. 角色 任务 流程 图 

















一 个 产品 ， 会 有 不 同 的 用 户 角色 去 操作 它 ， 他 
们 要 达成 的 目的 和 完成 的 任务 都 不 一 样 ， 比 如 一 个 
电 商 网 站 ， 买 家 需要 注册 、 搜 索 、 浏 览 商品 详情 、 图 3.4 
下 单 、 付 款 、 管 理 已 买 到 物品 等 功能 ， 而 卖家 需要 有 后 台 、 管 理 货品 、 展 示 货 品 、 
查看 数据 、 处 理 买 家 订单 、 维 护 售后 等 功能 。 不 同 的 角色 会 有 不 同 的 任务 流 ， 同 个 
色 也 会 因为 目的 不 同 而 处 理 不 同 的 任务 流 。 
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任务 流程 图 如 图 3.5 所 示 。 
当 一 个 页 面 画 不 下 全 部 流程 图 的 时 候 ， 我 们 可 以 用 小 标号 把 各 个 子 图 串联 ， 如 
图 3.6 所 示 。 





图 3.5 


4. 界面 布局 线 框图 

把 功能 块 切 分 到 每 个 页 面 后 ， 功 能 块 的 展现 和 排 布 要 考虑 到 屏幕 的 尺寸 和 控件 
可 操作 精确 度 ， 一 般 情况 下 ， 不 建议 将 功能 块 塞 得 太 满 ， 每 个 界面 最 好 有 了 明确 的 功 
能 重心 ， 如 果 需 要 很 多 模块 在 一 个 页 面 上 时 ， 需 要 用 归 类 、 隐 藏 、 分 层级 等 手法 来 
把 功能 布局 得 更 符合 操作 流程 和 人 机 交互 规范 。 对 于 线 框图 ， 可 以 用 色彩 的 深浅 来 
区 分 模块 ， 并 且 表 示 出 界面 醒目 优先 级 ， 如 图 3.7 所 示 。 

线 框图 上 的 注释 细节 如 下 一 般 如 果 注 释 过 多 ， 会 写成 DRD 交互 细节 文档 ) 。 

(1) 功能 : 操作 、 事 件 、 反 馈 方式 、 响 应 时 间 、 数 据 输 入 /输出 。 

(2) 内 容 : 文本、 字体、 图片、 排版、 尺寸、 链接 、 多 媒体 、 声 音 。 

(3) 行为 : 动画 样式 、 速 度 、 位 移 、 交 互 效果 、 链 接 跳 转 位 置 、 控 件 状态 。 

(4) 限制 因素 : 硬件 、 系 统 、 软 件 、 浏 览 器 、 数 据 格式 。 


5. 页 面 跳 转 逻辑 图 
当 每 一 页 的 线 框 功能 都 定义 和 布局 完毕 ， 就 需要 将 页 面 和 页 面 之 前 的 关联 和 跳 
转 事件 设 定 到 相关 控件 上 去 。 

这 时 候 要 考虑 更 细节 的 状态 判断 和 页 面 之 间 的 跳 转 ， 并 且 最 好 将 切换 形式 都 
定义 完毕 ， 如 果 口 述 无 法 表达 清楚 状态 切换 效果 ， 需 要 使 用 After Effects、Flash、 
Axure 等 交互 动 效 软件 来 模拟 状态 的 效果 ， 如 图 3.8 所 示 。 


6. 软件 逻辑 流程 图 
程序 员 在 开发 一 个 软件 的 时 候 ， 会 尽量 调用 系统 或 者 这 门 语言 的 成 熟 框架 或 
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发 包 ， 并 采用 一 些 工 厂 类 及 这 门 编程 语言 给 的 封装 的 方法 ， 这 就 会 涉及 一 个 问题 
控件 和 模块 的 重复 利用 。 


标志 

















图 3.7 


同时 ， 程 序 员 也 会 使 用 UML 等 建 模 方法 画 出 他 们 需要 的 图 ， 来 帮助 描述 开发 问 
题 ， 如 图 3.9 所 示 。 





Oo DOO CPO Hr 


















































7. 底层 数据 流程 图 
我 们 已 经 从 IT (Information Technology， 信 息 技术 ) 时 代 迈 入 DT (Data 
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Technology， 数 据 科技 ) 时 代 ， 大 量 
的 数据 挖掘 和 数据 分 析 成 为 产品 开 a 


发 过 程 中 很 重要 的 一 环 ， 除 了 要 做 
好 早期 数据 库 的 建设 和 前 端的 数据 


接口 ， 我 们 对 用 户 行为 的 数据 建 模 ee 
也 要 在 前 期 设计 时 做 好 。 人 一 外/ 









底层 数据 流程 图 如 图 3.10 所 示 。 3 
族 
@@ 3.4 UML 建 模 规 范 图 3.10 


UML (Unified Modeling Language) 又 称 统一 建 模 语 言 或 标准 建 模 语 言 , 如 图 3.11 
所 示 。 


(1) 功能 模型 。 从 用 户 操 作 软 件 的 角度 展示 系统 的 功能 ， 包 括 用 例 图 。 

(2) 对 象 模 型 。 采 用 对 象 、 属 性 、 操 作 、 关 联 等 概念 展示 系统 的 结构 和 基础 ， 
包括 类 图 。 

(3) 动态 模型 。 展 现 系 统 的 内 部 行为 和 数据 流动 通信 ， 包 括 顺 序 图 、 活 动 图 、 
状态 图 。 

结构 性 图 形 (Structure diagrams) : 强调 的 是 系统 架构 式 的 建 模 ,如 复合 结构 图 。 

行为 式 图 形 (Behavior diagrams) : 强调 系统 模型 中 触发 的 事件 和 行为 , 如 状态 图 。 

沟通 性 图 形 (Interaction diagrams) : 属于 行为 图 形 的 子 集合 ， 强 调 系统 模型 中 
的 资料 和 数据 流程 ， 如 部 署 图 。 

图 聚集 了 相关 的 事物 及 其 关系 的 组 合 ， 是 软件 系统 在 不 同 角度 的 投影 ， 图 由 代 
表 事 物 的 项 点 和 代表 关系 的 连通 图 表示 。 下 面 重点 阐述 8 种 常用 图 形 规范 。 

(1) 类 图 (Class diagram) 。 展 现 了 一 组 对 象 、 接 口 、 协 作 和 它们 之 间 的 关系 。 
类 图 描述 的 是 一 种 静态 关系 ， 在 系统 的 整个 生命 周期 中 都 是 有 效 的 ， 是 面向 对 象 系 
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UI 交互 动 效 必修 课 


统 的 


类 图 


间 的 


和 它 








建 模 中 





见 的 图 。 

















的 实例 ， 





党 
(2) 对 象 图 (Object diagram) 。 展 现 了 一 组 对 象 及 它们 之 间 的 关系 。 对 象 
几乎 使 用 与 类 图 完全 相同 的 标示 。 





到 
Oo 




















(3) 用 例 图 (Use case diagram) 。 展 现 























了 一 组 用 例 、 参 与 者 (actor) 及 它们 之 








关系 。 用 例 图 从 用 户 角度 描述 系统 的 静态 使 用 情况 ， 




















(4) 交互 图 (Interaction diagram) 。 用 本 








作 诡 








消息 


些 有 多 个 状态 的 、 行 


依赖 关系 ， 部 件 图 有 助 于 分 析 和 理解 组 件 之 间 的 相互 


含 一 


的 对 象 的 结构 组 织 。 




















描述 对 象 间 的 交互 关系 ， 由 一 组 对 象 
们 之 间 的 关系 组 成 ， 包 含 它们 之 间 可 能 传递 的 消息 。 
， 其 中 序列 图 描述 了 以 时 间 顺 序 组 织 的 对 象 之 间 的 交互 活动 ， 协 作 图 强调 收发 





交互 图 又 分 为 顺序 图 和 协 

















(5) 状态 图 (State diagram) 。 由 状态 、 转 换 、 事 件 和 活动 组 成 ， 描 述 类 的 对 象 
所 有 可 能 的 状态 及 事件 发 生 时 的 转移 条 件 。 通 常 状态 图 是 对 类 图 的 补充 ， 仅 需 为 那 





为 随 外 界 环境 而 改变 的 类 画 状态 图 。 


(6) 活动 图 (Active diagram) 。 一 种 特殊 的 状态 图 ， 展 现 了 系统 内 一 个 活动 到 
个 活动 的 流程 ， 活 动 图 有 利于 识别 并 行 活动 。 
(7) 组 件 图 (Component diagram) 。 展 现 了 一 组 组 件 的 物理 结构 和 组 件 之 间 的 














影响 程度 。 


(8) 部 署 图 (Deployment diagram) 。 展 现 了 运行 处 理 节点 及 其 中 的 组 件 的 配置 ， 
部 署 图 给 出 了 系统 的 体系 结构 和 静态 实施 视图 ， 它 与 组 件 图 相关 ， 通 常 一 个 节点 包 





个 或 多 个 构建 。 


@ 3.5 任务 及 任务 状态 





每 个 任务 都 会 有 达成 条 件 ， 并 且 在 过 程 


中 会 有 流程 的 当前 状态 ， 需 要 程序 去 判定 条 








件 是 否 达成 ， 如 果 没 有 达成 ， 需 要 提示 用 户 


补 齐 条 件 。 


行 处 理 。 





订单 





图 3. 
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判定 
无 效 , 将 不 能 通过 审核 , 将 失败 原因 告知 用 户 ， 
同时 订单 状态 置 为 无 效 。 








例如 : 订单 的 处 理 流程 说 明 。 
(1) 注册 用 户 提 交 订 单 后 ，12 小 时 内 进 






































(2) 订单 信息 由 订单 管理 员 进行 审核 
是 否 有 效 ， 如 填写 地 址 、 收 货 人 等 信息 














了 























(3) 订单 具备 以 下 几 种 状态 ， 
通常 会 经 历 提 交 一 审核 一 发 货 状 态 ， 如 
12 所 示 。 





图 3.12 





订单 详细 状态 〈 审 核 之 前 ) 。 

人 未 审核 ， 待 支付 《包括 选 择 除 货 到 付款 之 外 的 支付 方式 ) 。 
@ 未 审核 ， 货 到 付款 。 

@ 未 审核 ， 已 支付 。 

@ 管 理 员 审 核 中 。 

@ 已 审核 ， 订 单 无 效 作废 。 

@O 已 审核 ， 待 付款 〈 包 括 除 货 到 付款 之 外 方式 的 支付 方式 ) 。 
C@ 已 审核 ， 待 发 货 。 

@ 待 发 货 的 订单 ， 送 到 发 货 处 进行 发 货 。 

@ 已 发 货 。 

@ 已 签收 、 已 付款 。 


@ 3.6 用例 设计 

本 节 将 讲解 软件 用 例 设计 及 用 例 中 需要 检查 和 定义 的 部 分 举例 。 
3.6.1 软件 用 例 设计 

为 什么 要 编写 用 例 ” 用 例 是 为 了 用 较 少 的 人 力 和 资源 投入 ， 在 较 短 的 时 间 内 完 
成 测试 。 

发 现 软件 系统 的 缺陷 ， 保 证 软件 的 优良 品质 。 把 测试 行为 转换 为 可 管理 的 、 具 
体 量化 的 模式 。 用 例 一 般 由 产品 经 理 编写 ， 测 试 人 员 按照 用 例文 档 测 试 产品 功能 的 


健全 性 和 可 用 性 , 并 检查 软件 缺陷 及 Bug, 也 有 一 些 公司 由 程序 员 或 者 测试 人 员 编写 ， 
用 例 名 称 如 表 3.3 所 示 。 


























表 3.3 
用 例 名 称 用 例 名 称 
简 述 基 流 (Basic Flow) 
活动 者 与 基 流 相 关 的 用 例 
前 置 条 件 分 支流 (Sub flows) 
后 置 条 件 与 分 支流 相关 的 用 例 
扩充 条 件 替换 流 (Aletmative Flow) 


3.6.2 用例 中 需要 检查 和 定义 的 部 分 举例 


1. 用 户 类 型 
(1) 管理 员 / 非 管理 员 〈 不 同 权限 的 角色 ) 。 
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(2) 注册 用 户 /未 注册 用 户 ( 访 客 〉。 


2. 用 户 状 态 

(1) 已 登录 。 

(2) 未 登录 / 离线 /登录 状态 过 期 。 
(3) 未 注册 。 

(4) 风 控 /锁定 / 黑 名 单 等 。 


3. 网 络 状 态 

(1) 网 络 不 通 。 

(2) 2G、3G、4G、WiFi 网 络 切 换 。 
(3) 飞行 模式 。 


4. 数据 异常 

(1) 空 值 、 输 入 为 空 等 。 

(2) 数字 过 小 、 数 字 过 大 、 字 符 串 超出 、 特 殊 字符 。 
(3) 时 间 不 匹配 。 


5. 边界 值 

(1) 需求 设计 的 允许 最 小 和 最 大 值 。 

(2) 编程 语言 的 数据 类 型 的 边界 值 ， 比 如 int 的 最 大 值 。 
(3) 控件 的 首 个 和 末尾 元 素 ， 比 如 滚动 条 起 始 和 结束 。 


6. 文本 框 

C01》 室 s 

(2) 数字 、 字 母 、 特 殊 字 符 、 中 文 。 

(3) 输入 的 文本 的 长 度 、 最 小 长 度 、 最 长 长 度 。 
(4) 外 观 大小、 对齐、 字体 ) 。 


7. 文本 框 

(1) 空 。 

(2) 数字 、 字 母 、 特 殊 字符 、 中 文 。 

(3) 输入 的 文本 的 长 度 、 最 小 长 度 、 最 大 长 度 。 

(4) 外 观 〈 大 小 、 对 齐 、 字 体 ) 。 

(5) 状态 〈 是 否 可 编辑 、 是 否 是 密码 、 邮 箱 、 电 话 号 码 、 专 门 用 途 ) 。 
(6) 行为 〈 是 否 允 许 复制 粘贴 ， 是 否 支持 换行 ) 。 


8. 按钮 

(1) 外 观 〈 颜 色 、 尺 寸 、 对 齐 方式 、 文 字 ) 。 

(2) 状态 (可 用 、 失 效 、 未 选 、 选 中 、 点 击 后 等 )。 
(3) 行为 (是 否 允 许 双击 、 是 否 允 许 连 击 、 快 捷 键 是 否 支 持 、tab 键 是 否 能 选 ) 。 
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9. 下 拉 列 表 

(1) 外 观 〈 大 小 、 对 齐 、 字 体 ) 。 

(2) 状态 〈 是 否 有 初始 默认 值 ) 。 

(3) 行为 〈 是 否 能 记忆 选中 项 ， 是 否 支持 键盘 操作 ) 。 
10. 列表 

(1) 列表 为 空 (0 条 记录 ) 。 

(2) 列表 的 分 屏 显 示 是 否 符合 屏幕 尺寸 。 
(3) 列表 分 屏 数量 检查 。 

(4) 列表 最 后 一 页 显示 情况 。 

(5) 列表 的 刷新 ， 下 拉 刷 新 情况 。 

(6) 列表 的 加 载 及 上 画 、 下 画 情况 。 
(7) 列表 的 排序 和 默认 排序 。 


11. 搜索 框 

(1) 词汇 联想 功能 。 
(2) 是 否 支 持 模糊 搜索 。 
(3) 标签 和 关键 字 匹配 。 
(4) 组 合 搜索 。 


12. 输入 法 / 键盘 

(1) 默认 使 用 哪 种 键盘 。 

(2) 纯 数字 输入 框 是 否 直接 切换 成 数字 键盘 。 
(3) 是 否 能 正确 地 触发 键盘 弹出 和 收 起 功能 。 


13. 数据 

(1) 数据 输入 。 
(2) 数据 输出 。 
(3) 共享 数据 (账户 关联 、 是 否 同步 、 手 动 同步 、 自 动 同步 、 定 时 同步 )。 
(4) 硬件 调用 摄像 头 、GPS、 闪 光 灯 、 重 力 感应 、 扫 码 、 喇 叭 、 话 简 等 )。 













































































@@ 3.7 原型 设计 中 的 用 户 可 用 性 测试 


原型 设计 中 的 用 户 可 用 性 测试 (Usability 
testing) 如 图 3.13 所 示 。 

(1) 原型 中 的 可 用 性 测试 首先 要 明确 测 
试 目标 ， 提 供 可 操作 原型 。 

(2) 每 次 测试 目标 用 户 人 数 不 建 议 超过 
5 人 ， 记 录 员 、 测 试 员 、 观 察 员 若干 。 
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UI 交互 动 效 必修 课 








(3) 





可 








性 测试 目标 分 任务 完成 型 和 自 : 

















上 


浏览 型 。 














(4) 
(5) 
(6) 


被 测 用 / 
把 测试 任务 表 发 放 给 用 

性 能 评估 ， 统 计时 间 
(7) 流程 评估 ， 用 户 使 
(8) 交互 评估 ， 用 户 使 
(9) 易 用 性 评估 ， 发 生 问 
(10) 有 必要 的 话 ， 可 
(11) 测试 员 要 客观 提 







































































o. 











题 


以 动用 


户 信 息 登 记 表 ， 基 本 信息 包括 性 别 、 


各 


F 龄 、 教 育 程度 及 其 他 。 




















田 





ph 的 出 错 数 量 和 | 


ph 是 否 发 现 流程 





人 


户 并 负责 解答 表 上 上 月 
单位 
过 程 
的 时 候 ， 是 否 有 歧义 、 


oO. 


a 





看 不 懂 的 地 方 。 
题 。 
不 通 问题 。 
选择 困难 、 辨 识 性 等 问题 。 
































时 ， 系 统 是 否 给 子 


户 帮助 ， 是 否 易于 理解 学 习 。 








眼 动 仪 或 者 录像 、 





(12) 尽量 给 予 测试 者 金钱 及 小 礼物 作为 感谢 。 


(13) 测 试 完 后 , 整理 测试 报告 , 挑选 共性 、 重 复 


对 相应 产品 的 问题 点 进行 迭代 。 


记录 和 观察 被 测 者 行为 并 进行 分 析 ， 如 


帮助 用 户 完成 整个 测试 ， 并 且 询 问 用 户 遇 到 的 





录音 、 录 屏 等 记录 设备 。 


和 布置 任务 ， 避 免 主 观 引导 测试 者 。 


现 问题 的 地 方 , 设置 问题 优先 级 ， 
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所 示 。 








难 ， 如 图 3.15 所 示 。 




















可 用 性 指南 步骤 如 图 3.16 
所 示 。 

软 
几 点 。 

(1) 基准 测试 。 如 单 用 户 
的 测试 或 者 在 无 数据 条 件 下 的 
测试 ， 目 的 是 提供 一 个 标准 供 
后 续 测 试 比 对 。 

(2) 负载 测试 。 向 系统 施 
加 一 定 的 压力 ， 一 般 最 大 压力 








件 的 性 能 测试 包括 以 下 









































的 20% 或 者 日 常 使 用 压力 即 
可 ， 确 保 系统 正常 运转 。 





IE - 


本 
~ ee 
图 3.16 


(3) 压力 测试 。 向 系统 施加 预期 最 大 压力 ， 测 试 系统 在 繁忙 状态 下 的 性 能 表现 。 


(4) 容量 测试 。 不断 地 增 大 对 系统 的 压力 , 直至 上 














为 系统 的 发 展 提供 


有 安信 息 。 








(5) 稳定 性 测试 。 长 时 间 运 行 的 稳定 情况 。 
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现 瓶 颈 。 




















1. 软件 版 本 阶段 说 明 

(1) Base 版 。 此 版 本 表示 该 软件 仅仅 是 一 个 页 面 框架 ， 都 是 假 链接 ， 通 常 包 括 
所 有 的 功能 占 位 和 页 面 布 局 ， 但 页 面 中 的 功能 都 没有 作 完 整 的 实现 ， 只 是 作为 整体 
网 站 的 一 个 基础 架构 。 

(2) Alpha 版 。 此 版 本 表示 该 软件 在 此 阶段 主要 是 以 实现 软件 功能 为 主 ， 通 常 只 
在 软件 开发 者 内 部 交流 。 一 般 而 言 ， 该 版 本 软件 的 Bug 较 多 ， 需 要 继续 修改 。 

(3) Beta 版 。 该 版 本 相对 于 Alpha 版 已 有 了 很 大 的 改进 ， 消 除了 严重 的 错误 ， 
但 还 是 存在 着 一 些 缺 陷 ， 需 要 经 过 多 次 测试 来 进一步 消除 ， 此 版 本 主要 的 修改 对 象 
是 软件 的 UI。 

(4) RC 版 。 该 版 本 已 经 相当 成 熟 了 ， 基 本 上 不 存在 导致 错误 的 Bug， 与 即将 发 
行 的 正式 版 相差 无 几 。 

(5) Release 版 。 该 版 本 意味 “最 终 版 本 ”， 是 最 终 交 付 用 户 使 用 的 版 本 ， 该 版 
本 有 时 也 称 为 标准 版 。 一 般 情 况 下 ，Release 版 不 会 以 单词 形式 出 现在 软件 封面 上 ， 
取而代之 的 是 符号 ( R )。 


2. 版 本 命名 规范 

软件 版 本 号 由 4 部 分 组 成 : 第 一 个 “1” 为 主 版 本 号 ,第 二 个 “1” 为 子 版 本 号 ， 
第 三 个 “1” 为 阶段 版 本 号 ， 第 四 部 分 为 日 期 版 本 1.1.1.160521 beta 
号 加 希腊 字母 版 本 号 。 希腊 字母 版 本 号 共有 5 种 ， 下 全 全 证 
分 别 为 base、alpha、beta、RC、release， 例 如 主 版 本 号 \ 阶段 版 本 号 打出 字 二 后 本 号 
1.1.1.160521_beta， 如 图 3.17 所 示 。 了 向 本 号 日 闪 E 本 号 


3. 版 本 号 定 修改 规则 

(1) 主 版 本 号 (1) 。 当 功能 模块 有 较 大 的 变动 ， 比 如 增加 多 个 模块 或 者 整体 架 
构 发 生变 化 ， 此 版 本 号 由 项 目 决定 是 否 修改 。 

(2) 子 版 本 号 (1) 。 当 功能 有 一 定 的 增加 或 变化 ， 比 如 增加 了 对 权限 控制 、 自 
定义 视图 等 功能 ， 此 版 本 号 由 项 目 决定 是 否 修改 。 

(3) 阶段 版 本 号 (1) 。 一 般 是 Bug 修复 或 是 一 些小 的 变动 ， 要 经 常 发 布 修订 版 ， 
时 间 间 隔 不 限 ， 修 复 一 个 严重 的 Bug 即 可 发 布 一 个 修订 版 ， 此 版 本 号 由 项 目 经 理 决 
定 是 否 修改 。 

(4) 日 期 版 本 号 〈160521) 。 用 于 记录 修改 项 目的 当前 日 期 ， 每 天 对 项 目的 修 
改 都 需要 更 改 日 期 版 本 号 ， 此 版 本 号 由 开发 人 员 决 定 是 否 修改 。 

(5) 希腊 字母 版 本 号 〈beta) 。 此 版 本 号 用 于 标注 当前 版 本 的 软件 处 于 哪个 开发 
阶段 , 当 软 件 进入 到 另 一 个 阶段 时 需要 修改 此 版 本 号 , 此 版 本 号 由 项 目 决定 是 否 修改 。 


4. 文件 命名 规范 

文件 名 称 由 4 部 分 组 成 : 第 一 部 分 为 项 目 名 称 ， 第 二 部 分 为 文件 的 描述 ， 第 三 
部 分 为 当前 软件 的 版 本 号 ， 第 四 部 分 为 文件 阶段 标识 加 文件 后 缀 。 例 如 ， 项 目 外 包 
平台 测试 报告 1.1.1.160521_beta_b.xls， 如 图 3.18 所 示 ， 此 文件 为 项 目 外 包 平 台 的 测 
试 报告 文档 ， 版 本 号 为 1.1.1.160521_beta。 
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如 果 是 同一 版 本 同一 阶段 的 文件 修改 过 两 次 以 上 ， 则 在 阶段 标识 后 面 加 以 数字 


标识 ， 每 次 修改 数字 加 1， 如 项 目 外 包 平台 测试 报告 1.1.1.160521_beta_ bl.xls。 


软件 测试 的 几 个 阶段 如 图 3.19 所 示 。 











软件 测试 
项 目 外 包 平台 测试 报告 1.1.1.160521_beta_blxls 全 和 
手动 测试 
| 当前 软件 版 本 号 软件 呈 全 
项 目 名 称 自 定义 文档 描述 阶段 标识 和 文件 后 级 
3.18 3.19 


@ 3.8” 缺陷 反馈 跟踪 及 版 本 和 迭代 


有 问题 的 地 方 就 是 存在 机 遇 的 地 方 ， 分 析 对 手 及 自身 产品 的 问题 及 缺陷 ， 并 且 


列 出 解决 方法 ， 随 着 解决 方法 的 积累 ， 你 的 经 验 也 会 变 得 丰富 起 来 。 


1. 缺陷 的 状态 

(1) 初始 化 。 缺 陷 的 初始 状态 。 

(2) 待 分 配 。 缺 陷 等 待 分 配给 相关 开发 人 员 处 理 。 

(3) 待 修 正 。 缺 陷 等 待 开 发 人 员 修 正 。 

(4) 待 验证 。 开 发 人 员 已 完成 修正 ， 等 待 测试 人 员 验 证 。 
(5) 待 评审 。 开 发 人 员 拒绝 修改 缺陷 ， 需 要 评审 委员 会 评审 。 
(6) 关闭 。 缺 陷 已 被 处 理 完成 。 

2. 缺陷 基本 信息 

缺陷 ID。 唯一 的 缺陷 ID， 可 以 根据 该 ID 追踪 缺陷 。 


3. 测试 环境 说 明 
(1) 缺陷 标题 。 描 述 缺陷 的 标题 。 
(2) 缺陷 的 详细 描述 。 之 所 以 把 这 项 单独 列 出 来 ， 是 因为 对 缺陷 描述 的 详细 程 





度 直 接 影响 开发 人 员 对 缺陷 的 修改 ， 描 述 应 该 尽 可 能 详细 。 
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(3) 缺陷 的 状态 。 分 为 “ 待 分 配 ”“ 待 修正 ”“ 待 验证 ”“ 待 评审 ”“ 关 闭 ”。 
(4) 缺陷 的 严重 程度 。 一 般 分 为 “致命 ” “严重” “一般 ”“ 建 议 ”4 种 。 

(5) 缺陷 的 紧急 程度 。 从 1 ~ 4，1 是 优先 级 最 高 的 等 级 ，4 是 优先 级 最 低 的 等 级 。 
(6) 缺陷 提交 人 。 名 字 (邮件 地 址 ) 。 

(7) 缺陷 提交 时 间 。 年 、 月 、 日 、 时 、 分 、 秒 。 

(8) 缺陷 所 属 项 目 /模块 。 最 好 能 较 精 确 地 定位 至 模块 。 

(9) 缺陷 指定 的 解决 人 。 缺 陷 “ 提 交 ” 状 态 为 空 时 ， 在 缺陷 “分 发 ”状态 下 ， 








项 目 经 理 指定 相关 开发 人 员 修改 。 











(10) 缺陷 指定 解决 时 间 。 项 目 经 理 指定 的 开发 人 员 修改 此 缺陷 的 最 后 期 限 。 

〈11)》 对 处 理 结果 的 描述 。 如 果 对 代码 进行 了 修改 ， 要 求 在 此 处 体现 出 修改 ， 如 
缺陷 验证 人 、 缺 陷 验 证 结果 描述 、 对 验证 结果 的 描述 〈 通 过 、 不 通过 ) 。 

(12) 必要 的 附件 。 对 于 某 些 文字 很 难 表达 清楚 的 缺陷 , 使 用 图 片 等 附件 是 必要 的 。 





@ 3.9 ”四 类 不 同 的 软件 开发 模式 


四 类 不 同 的 软件 开发 模式 包括 瀑布 开发 模式 、 和 迭代 开发 模式 、 螺 旋 开 发 模式 、 
敏捷 开发 模式 。 


3.9.1 瀑布 开发 模式 


瀑布 模式 (Waterfall Model) 是 由 W.W.Royce 在 1970 年 提出 的 软件 开发 模型 ， 
瀑布 式 开发 是 一 种 老 旧 的 计算 机 软件 开发 方法 。 瀑布 模 式 是 最 典型 的 预见 性 的 方法 ， 
严格 遵循 预先 计划 的 需求 分 析 、 设 计 、 编 码 、 集 成 、 测 试 、 维 护 的 步骤 顺序 进行 。 
步骤 成 果 作为 衡量 进度 的 方法 ， 例 如 需求 规格 、 设 计 文档 、 测 试 计划 和 代码 审阅 等 。 
瀑布 式 的 主要 问题 是 它 的 严格 分 级 导致 自由 度 降 低 ， 项 目 早 期 即 做 出 承诺 导致 对 后 
期 需求 的 变化 难以 调整 ， 代 价 高 昂 。 瀑 布 式 方法 在 需求 不 明 并 且 在 项 目 进行 过 程 中 
可 能 变化 的 情况 下 基本 是 不 可 行 的 。 瀑 布 开发 模式 图 如 图 3.20 所 示 。 





3.9.2 ”迭代 开发 模式 


和 迭代 开发 〈Iterative Development) 也 被 称 作 迭 代 增 量 式 开发 或 欠 代 进化 式 开发 ， 
是 一 种 与 传统 的 瀑布 式 开发 相反 的 软件 开发 过 程 ， 它 弥补 了 传统 开发 方式 中 的 一 些 
弱点 ， 具 有 更 高 的 成 功率 和 生产 率 。 
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和 迭代 开发 即 每 次 只 设计 和 实现 这 个 产品 的 一 部 分 ， 逐 步 完 成 产品 ， 每 次 设计 和 
实现 一 个 阶段 叫 作 一 个 迭代 ， 层 层 推进 。 
在 迭代 式 开发 方法 中 ， 整 个 开发 工作 被 组 织 为 一 系列 的 短小 的 、 固 定 长 度 (如 3 











周 ) 的 小 项 目 ， 被 称 为 一 系列 的 迭代 。 
每 一 次 迭代 都 包括 了 需求 分 析 、 一 
设计 、 实 现 与 测试 。 采 用 这 种 方法 ， (OOOoOw 
发 工作 可 以 在 需求 被 完整 地 确定 之 。 “~ 车 一 一 半 一 一 站 一 一 
前 启动 ， 并 在 一 次 迭代 中 完成 系统 的 
一 部 分 功能 或 业务 逻辑 的 开发 工作 ， my 
再 通过 客户 的 反馈 来 细 化 需求 ,并 开 ft 。 arrsar lit 
始 新 一 轮 的 迭代 。 ] 

选 代 式 开发 的 优点 包括 以 下 几 点 。 rm RD = 
(1) 降低 风险 。 本 


(2) 得 到 早期 用 户 反馈 。 es 

(3) 持续 的 测试 和 集成 。 NS 

(4) 使 用 变更 。 A 
(5) 提高 复 用 性 。 


迭代 开发 图 例如 图 3.21 所 示 。 图 3.21 



































迭代 的 细节 





3.9.3 ”螺旋 开发 模式 


螺旋 开发 (Spiral Development) 是 巴 利 : 玻 姆 (Barry Boehm) 在 1988 年 正式 发 
表 的 软件 系统 开发 的 模式 ， 它 将 瀑布 模式 和 快速 原型 模式 结合 起 来 ， 强 调 了 其 他 模 
式 所 忽视 的 风险 分 析 ， 特 别 适 合 大 型 复杂 的 系统 。 

“螺旋 模式 ” 刚 开 始 规模 很 小 ， 在 项 目 被 定义 得 更 好 、 更 稳定 后 逐渐 展开 。 

“螺旋 模式 ”的 核心 在 于 你 不 需要 在 刚 开始 时 就 把 所 有 事情 都 定义 得 清 清楚 楚 ， 
只 需 定义 最 重要 的 功能 并 实现 它 ， 然 后 听取 客户 的 意见 ， 之 后 再 进入 下 一 个 阶段 ， 
如 此 不 断 重复 ， 直 到 得 到 满意 的 最 终 产 品 。 

(1) 制定 计划 。 确 定 软件 目标 ， 选 定 实施 方案 ， 弄 清 项 目 开 发 的 限制 条 件 。 

(2) 风险 分 析 。 分 析 评 估 所 选 方案 ， 考 虑 
如 何 识别 和 消除 风险 。 

(3) 实施 工程 。 实 施 软 件 开 发 和 验证 。 

(4) 客户 评估 。 评 价 开发 工作 ， 提 出 修正 
建议 ， 制 订 下 一 步 计 划 。 

螺旋 模式 在 很 大 程度 上 是 一 种 风险 驱动 的 传统 意识 
方法 体系 ， 因 为 在 每 个 阶段 和 经 常 发 生 的 循环 战士 意识 
之 前 ， 都 必须 进行 风险 评估 。 

螺旋 开发 模式 图 如 图 3.22 所 示 。 


后 整合 意识 









积分 意识 
后 现代 意识 


现代 主义 意识 

















图 3.22 
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3.9.4 敏捷 开发 模式 





扩展 了 第 五 个 价值 观 一 一 谦逊 。 














E， 人 少 但 是 精干 ， 可 以 面 





(1) 人 员 之 间 的 互动 重 于 过 程 和 工具 ， 人 员 彼 此 信人 











对 面 沟 通 。 


(2) 可 以 工作 的 软件 或 原型 Demo， 
行 的 代码 ， 比 繁重 求全 而 完 备 的 文档 更 重 





第 3 章 交互 设计 工具 和 图 


敏捷 开发 (Agile Development) 是 一 种 从 1990 年 开始 的 逐渐 引起 广泛 关注 的 新 
型 软件 开发 方法 , 是 一 种 以 人 为 核心 迭代、 循序 渐进 的 开 


Programming， 极 限 编 程 ) 的 4 个 价值 观 : 沟通 、 简 


发 方法 .包括 了 XP(Extreme 
气 ， 并 在 此 基础 上 





























(3) 客户 协作 重 于 合同 谈判 ， 
评审 阶段 让 更 多 的 人 参与 进来 。 


初期 





注重 检查 与 调整 ， 在 项 








(4) 随时 应 对 变化 重 于 循规蹈矩， 作为 一 个 整体 工作 ， 按 短 迭代 周期 工作 ， 每 


次 迭代 交付 一 些 成 果 。 


敏捷 开发 图 例 模 式 如 图 3.23 所 示 。 


从 最 终 用 户 ,输入 客户 、 
团队 和 其 他 利益 相关 者 


Ll 
@ 


(一 一 





产品 订单 


3.9.5 ”四 类 不 同 软件 开发 模式 的 优 缺点 


1. 瀑布 开发 





优点 软件 开发 模型 能 清晰 、 直 观 地 表达 软件 开发 全 过 程 
的 主要 活动 和 任 来 作为 软件 项 目 工作 的 基础 。 简单 分 阶段 且 阶 段 间 存在 
关系 ， 需 求 易于 完善 定义 目 不 易 变更 的 软件 系统 ， 常见 月 

缺点 : 在 项 目 各 个 阶段 之 间 极 少 有 反馈 ， 周 期 长 ， 
一 阶段 。 只 有 在 项 目 生命 周期 的 后 期 才能 看 到 结 
程 碑 来 跟踪 各 个 项 目 阶段 ， 需 求 更 改 1 













































































在 持续 时 间 
冲刺 订单 或 目标 没有 变化 


ii ) 


， 有 明确 规定 了 要 完成 





内 未 


























传统 的 IT 交付 型 软 
一 个 阶段 不 定义 好 不 进入 下 





发 。 




















和 里 





。 需 要 过 多 的 强制 完成 








033 


UI 交互 动 效 必修 课 


2. 迭代 开发 
优点 : 与 瀑布 式 相反 ， 每 次 只 完成 软件 的 一 部 分 ， 先 堆 重 起来， 再 通过 每 次 的 
迭代 修正 之 前 的 问题 。 最 少 的 损失 先 完成 一 个 “不 完美 的 成 果 物 ” 直 至 提交 ， 然 后 
再 通过 客户 或 用 户 的 反馈 信息 ， 在 这 个 “不 完美 的 成 果 物 ”上 逐步 进行 完善 。 
缺点 : 在 项 目 早期 开发 时 可 能 有 所 变化 ， 需 要 有 一 个 高 素质 的 项 目 管理 者 和 
个 高 技术 水 平 的 开发 团队 ， 如 果 增 量 包 之 间 存 在 相交 的 情况 且 未 很 好 处 理 ， 则 必须 
作 全 盘 系统 分 析 ， 防 止 增加 的 功能 和 整个 系统 有 冲突 。 


3. 螺旋 开发 

优点 : 很 大 程度 上 是 一 种 风险 驱动 的 方法 体系 ， 因 为 在 每 个 阶段 之 前 及 经 常 发 
生 的 循环 之 前 ， 都 必须 首先 进行 风险 评估 。 以 小 的 分 段 来 构建 大 型 系统 ， 使 成 本 计 
算 变 得 简单 容易 。 客 户 始终 参与 每 个 阶段 的 开发 ， 保 证 了 项 目 不 偏离 正确 方向 和 项 
的 可 控 性 。 设 计 上 具有 灵活 性 ， 可 以 在 项 目的 各 个 阶段 进行 变更 ， 通 过 层 层 递 进 ， 
从 核心 能 用 的 基础 原型 几 次 迭代 后 得 到 完整 产品 。 

缺点 ， 采用 螺旋 模型 需要 具有 相当 丰富 的 风险 评估 经 验 和 专门 知识 ， 在 风险 较 
大 的 项 目 开发 中 ， 如 果 未 能 够 及 时 标识 风险 ， 势 必 造 成 重大 损失 。 过 多 的 迭代 次 数 
会 增加 开发 成 本 ， 延 迟 提交 时 间 。 


4. 敏捷 开发 

优点 : 按 商 业 价值 排序 需求 列表 ， 在 Sprint 计划 会 议 上 分 析 、 讨 论 和 评估 得 到 
一 个 任务 列表 ， 每 个 迭代 结束 后 ， 得 到 交付 物 并 且 评 审 。 以 人 沟通 为 核心 ， 减 少 繁 
复 匈 余 的 文档 编写 ， 是 一 种 适用 于 迅速 需求 增 量 的 产品 开发 模式 。 敏 捷 开发 周期 比 
迭代 开发 更 短 ， 甚 至 1 ~ 2 周一 个 Sprint。 

缺点 : 敏捷 方法 有 时 候 被 误 认为 是 无 计划 性 和 纪律 性 的 方法 ， 实 际 上 ， 更 确切 
的 说 法 是 敏捷 方法 强调 适应 性 而 非 预见 性 。 当 项 目的 需求 起 了 变化 ， 团 队 应 该 迅速 
适应 。 这 个 团队 可 能 很 难 确切 描述 未 来 将 会 如 何 变化 。 
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@ 4.1 产品 经 理 常见 交付 物 


本 节 将 讲解 产品 经 理 常见 的 交付 物 。 
4.1.1 BRD (商业 需求 描述 ) 


BRD， 英 语 全 称 Business Requirement Document， 中 文 意思 是 商业 需求 描述 。 其 
核心 的 用 途 是 产品 在 投入 研发 之 前 ， 企 业 高 层 作 为 决策 评估 的 重要 依据 。 其 内 容 涉 
及 市 场 分 析 、 销 售 策略 、 盈 利 预测 等 ， 通 常 是 供 决策 层 讨论 的 演示 文档 ， 一 般 比 较 
短小 精炼 ， 没 有 产品 细节 。Word 文档 3 页 左右 、PPT 文档 10 页 左右 为 宜 。 


4.1.2 MRD (市 场 需求 文档 ) 


MRD， 英 文 全 称 Market Requirement Document， 中 文 意思 是 市 场 需求 文档 。 

该 文档 在 产品 项 目 中 起 “承上启下 ”的 作用 ,“ 向 上 ”是 对 不 断 积累 的 市 场 数 据 
的 一 种 整合 和 梳理 ,“ 向 下 ”是 对 后 续 工作 的 方向 说 明和 工作 指导 ， 是 产品 项 目 由 “ 准 
备 ” 阶 段 进 入 “实施 ”阶段 的 第 一 文档 。 

(1) 市 场 规模 、 市 场 结构 与 划分 。 

(2) 目标 市 场 的 设 定 。 

(3) 产品 消费 群体 、 消 费 方式 、 消 费 习 惯 及 影响 市 场 的 主要 因素 分 析 。 

(4) 目前 公司 产品 市 场 状 况 ， 产 品 所 处 市 场 发 展 阶段 (空白 /新 开发 /高 成 长 / 
成 熟 /饱和 ) ， 产 品 排名 及 品牌 状况 。 

(5) 市 场 趋势 预测 和 市 场 机 会 。 

用 户 说 明 : 目标 用 户 群 体 〈 要 求 准确 信息 : 年 龄 段 、 收 入 、 地 区 、 学 历 ) 。 

目标 群体 特征 : 主要 分 析 共 性 。 

产品 定位 我 们 用 什么 样 的 产品 满足 用 户 或 用 户 市 场 , 针对 什么 用 户 , 做 什么 事 。 

产品 的 核心 目标 : 解决 商业 模式 画布 [-— C 一 - = 
目标 市 场 、 用户 的 核心 需求 ; 纺 什 近代 二 二 
核心 目标 的 工作 级 别 最 高 。 

商业 模式 画布 : 通常 分 
为 目标 用 户 TU) 、 价 值 
主张 (VP) 、 渠 道 (CH) 、 
用 户 关系 (CR) 、 收 入 来 
源 (R$) 、 核 心 资源 (KR) 、 
关键 业务 (KA) 、 重 要 合 
作 (KP)、 成 本 结构 (C$) 。 
某 公 司 商业 模式 画布 如 图 
4.1 所 示 。 
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市 场 说 明 : 大 众 市 场 、 小 众 市 场 、 利 基 市 场 、 区 隔 化 市 场 、 多 元 化 市 场 、 多 边 
平台 市 场 。 

价值 类 型 颠覆 式 创新 、 更 快 更 好 、 个 性 定制 、 专 注 把 事情 做 好 、 优 秀 的 设计 、 
价格 优势 、 削 减 成 本 、 抑 制 风 险 、 连 接 、 方 便 易 用 。 





4.1.3 PRD (产品 需求 文档 ) 


PRD， 英 文 全 称 Product Requirement Document， 中 文 意思 是 产品 需求 文档 。 

引言 部 分 主要 包括 需求 背景 、 需 求 目 的 、 需 求 概要 、 涉 及 范围 、 全 局 规则 、 名 
词 说 明和 交互 原型 地 址 等 。 

业务 建 模 的 目的 是 帮助 阅读 对 象 更 好 地 理解 开发 需求 ， 常 用 的 模型 种 类 包括 用 
例 图 、 实 体 图 、 状 态 图 、 流 程 图 等 ， 常 用 的 建 模 语言 如 UML。 

业务 模块 包含 具体 页 面 的 元 素 、 用 例 规则 ， 以 及 相关 的 原型 、 流 程 图 ， 业 务 模 
块 的 描述 是 整个 文档 最 核心 的 部 分 。 

1) PRD 文档 包含 但 不 仅 限 于 以 下 内 容 〈 详 细 请 见 随 书 附送 的 文档 模板 ) 。 

(1) 项 目 概述 。 项 目 背景 、 战 略 意义 、 目 的 、 目 标 市 场 、 商 业 价 值 等 。 

(2) 业务 说 明 。 业 务 描述 、 业 务 流程 、 业 务 规则 。 

(3) 产品 概念 。 产 品 主要 功能 、 产 品 结构 、 产 品 服务 、 产 品 预 留 功 能 。 

(4) 项 目 规划 。 产 品 流程 图 、 产 品 框架 。 

2) 产品 发 展 阶段 如 下 。 

(1) 产品 1 期 。 市 场 调研 ， 需 求 分 析 X 年 X 月 X 日 一 Xx 年 X 月 X 日 。 

(2) 产品 2 期 。 产 品 规划 设计 ，X 年 XxX 月 XxX 日 一 Xx 年 X 月 Xx 日 。 

(3) 产品 3 期 。 框 架 形 成 ，X 年 X 月 X 日 一 xX 年 X 月 Xx 日。 

(4) 产品 4 期 。Alpha 版 本 ，X 年 X 月 XxX 日 一 Xx 年 X 月 Xx 日 。 

(5) 产品 5 期 。Beta 版 本 ，X 年 X 月 XxX 日 一 Xx 年 X 月 Xx 日 。 

(6) 产品 6 期 。Standard 版 本 ，X 年 X 月 XxX 日 一 Xx 年 X 月 Xx 日 。 

功能 范围 ， 功 能 模块 划分 、 功 能 概述 列表 、 功 能 模块 设计 、 整 合 需求 。 
用 户 范 围 : 涉及 不 同 操作 者 、 系 统 使 用 者 。 
界面 原型 : 主要 界面 功能 描述 、 人 机 界面 风格 、 屏 幕布 局 或 解决 方案 限制 、 错 
误 信 息 标 准 。 
词汇 表 : 产品 需求 设计 的 常用 词汇 如 表 4.1 所 示 。 

















表 4.1 
产品 质量 需求 产品 测试 需求 产品 升级 维护 需求 
产品 营销 需求 规则 变更 非 功 能 需求 
其 他 需求 UC 部 分 类 图 说 明 





用 例 图 说 明 风险 规避 法 务 需求 





037 





4.1.4 FRD (功能 需求 文档 ) 


FRD， 英 文 全 称 Function Requirement Document， 中 文 意思 是 功能 需求 文档 。 一 
般 由 产品 经 理 和 研发 工程 师 共 同 完成 ， 定 义 产品 程序 开发 中 的 一 些 规范 和 需求 。 

FRD 文档 包含 但 不 仅 限 于 以 下 这 些 ， 如 表 4.2 所 示 〈 详 细 内 容 请 见 随 书 附送 的 
文档 模板 ) 。 














表 4.2 
引 讶 参考 资料 | 假设 和 约束 > 
软件 概述 项 目 风险 
使 用 工具 命 
系统 总 逻辑 结构 图 Er | 需求 规格 | | 
外 部 接口 需求 ( 硬 
设备 及 分 布 件 接口 、 软 件 接 出 
口 、 通 信 接 口 ) 

用 户 界面 网 络 类 型 
屏幕 布局 | 菜单 布局 。 | 输入 输 册 格式 | | 
静态 数据 数据 采集 
错误 显示 格式 

安全 性 需求 

信息 认证 ) 
汪汪 | 1 
可 补充 性 、 易 读 性 、 
可 靠 性 、 运 行 环境 可 
转换 性 的 特殊 要 求 ) 
软件 测试 验收 具体 内 容 

技术 资料 文档 需要 ， 全 面 计算 到 各 种 细 枝 
末节 ， 如 图 4.2 所 示 。 Technical 
Documentation 


i 人 员 成 本 、 
技术 成 本 、 推 广 成 本 、 运 营 成 本 、 物 料 成 本 、 
仓储 成 本 及 公司 司 成 本 、 4.2 


4.1.5 ”DRD (交互 细节 说 明文 档 ) 


所 谓 DRD (交互 细 节 说 明文 档 ) ， 是 由 交互 设计 师 写 给 前 端 、 测 试 及 开发 工程 
师 的 参考 。 作 用 是 当 细 节 不 明确 的 时 候 ， 不 需要 当面 沟通 ， 可 以 从 文档 中 获得 确切 
的 信息 支持 ， 以 减少 沟通 成 本 。 


Comprehensive right down 
tothe smallest details. 
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1. 文档 版 本 信息 
版 本 号 、 更 新 时 间 、 更 新 内 容 、 更 新 人 、 更 新 原因 。 





2. 拓扑 图 
全 产品 或 整 站 及 部 分 模块 拓扑 图 。 


3. 公共 模块 或 UI KIT 的 梳理 与 说 明 
导航 、 页 脚 、 文 本 框 、 公 共 按 钮 等 。 


分 提示 

做 好 公用 模块 的 梳理 ， 便 于 模块 化 开发 ， 交 互 流程 尽量 跑 通 ， 不 能 出 现 缺 少 页 
面 及 死 链 的 情况 。 

4. 复杂 交互 行为 的 逻辑 设计 图 及 说 明 

主要 针对 逻辑 较 强 的 页 面 以 图 表 化 的 方式 来 给 予 注释 与 说 明 。 

(1) 角色 。A、B、C 等 ( 电 商 网 站 举例 : 买 家 、 卖 家 、 网 站 管理 员 等 )。 

(2) 行为 。 选 定 商品 ， 加 入 购物 车 。 

(3) 判定 。 情 况 1 购物 车 未 满 ， 可 以 加 入 ; 情况 2 为 购物 车 已 满 ， 删 除 商品 或 





5. 对 通用 控件 作 基 础 说 明 或 描述 

隐藏 的 交互 行为 及 操作 分 支 ， 如 下 拉 列 表 内 的 内 容 、 状 态 等 。 

(1) 字符 限制 。 如 字符 类 型 、 字 符 串 长 度 、 字 符 串 被 截断 后 的 表现 形式 。 

(2) 字体 风格 。 字 体 样式 、 字 体 尺 寸 、 字 体 是否 有 阴影 等 效果 。 

(3) 链接 指向 。 链 接 按 钮 ， 具 体 跳 转 位 置 或 网 址 ， 打 开 的 方式 〈 同 页 面 还 是 新 
开 页 面 ， 或 临时 弹 窗 等 ) ， 是 否 有 计时 器 让 其 自动 消失 。 

(4) 页 面 和 图 片 描述 。 是 否 带 alt、title 等 描述 性 信息 ， 网 页 弹出 浮动 层 或 抽 拉 
层 的 说 明 ，JS 效果 的 表现 形式 ， 在 不 影响 效果 的 前 提 下 ， 尽 量 减 少 不 必 要 的 JS 效果 
和 代码 。 

(5) 交互 的 细节 说 明 。 如 下 拉 框 内 文字 、 文 本 限制 域 、 每 个 控件 对 应 的 用 途 意 
义 标注 、 控 件 的 其 他 不 可 见 状态 等 ， 以 及 表单 的 文本 类 型 、 数 值 范围 、 禁 止 使 用 的 
文字 、 极 限 状 态 所 呈现 的 方式 、 权 限 限 制 、 数 据 限制 、 字 段 限制 和 一 般 错 误 提示 。 

(6) 控件 状态 说 明 。 激活 标签 与 未 激活 或 有 效 失效 的 不 同 状态 、 操作 产生 的 提示 、 
列表 信息 显示 数量 、 页 数 、 数 量 上 限 或 下 限 、 页 数 标号 省 略 方式 、 不 同 复杂 场景 的 
状态 与 说 明 〈 必 要 的 话 需 配合 场景 图 ) 。 

(7) 浏览 器 兼容 性 测试 说 明 。 列 出 所 测试 的 主流 浏览 器 ， 及 对 页 面 支持 功能 的 
要 求 ， 比 如 IE6 支持 主要 功能 ， 哪 些 浏览 器 、 哪 些 CSS 不 支持 、 哪 些 HTML5 新 功 
能 不 支持 等 。 

(8) 测试 部 门 审核 及 测试 用 例 。 测 试 部 门 DRD 所 描述 的 交互 行为 和 逻辑 设计 从 
测试 的 角度 给 予 检测 ， 并 提出 修改 建议 。 
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数据 库 设 置 如 图 4.3 所 示 。 





























March Mer iw][31 lw)l2000 iw] [1 vx] EE 

Am [xpr ll iu)[2000 wT i es 

Sancal Save and next > 
图 4.3 


@ 4.2 导航 设计 让 用 户 不 迷路 


在 网 站 上 维持 内 容 的 分 类 标准 (标签 、 类 型 、 类 别 ) ， 如 图 4.4 所 示 。 








1. 十 种 常用 APP 导航 类 型 

(1) 底部 Tab。 优 势 为 可 见 性 好 、 便 于 操作 ， 缺 点 是 个 数 有 限 。 

(2) 顶部 Tab。 优 势 为 扩展 性 好 、 可 滑动 ， 缺 点 是 手指 操作 距离 较 远 。 

(3) 舵 式 导 航 .优势 为 常用 功能 居中 摆 放 , 明显 、 醒 目 、 品 牌 感 强 , 缺点 是 个 数 有 限 。 
(4) 抽 导 导航。 优势 为 不 占 地 方 ， 缺 点 是 提示 不 良 会 容易 忽视 。 


左 划 大 部 分 为 设置 列表 、 个 人 信息 等 ， 右 划 比 较 少见 ， 多 用 于 补充 界面 ， 上 拉 
一 般 为 后 全 插件 快捷 操控 功能 ， 下 拉 一 般 为 信息 提示 、 人 快捷 设置 。 
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(5) 宫 格 导航 。 优 势 为 视野 范围 大 、 展 示 入 口 多 ， 缺 点 是 过 多 的 时 候 整 体感 觉 
过 于 烦 乱 。 

(6) 卡片 导航 。 优 势 为 内 容 信 息 多 、 图 文 并 茂 ， 缺 点 是 一 页 只 能 放置 几 张 卡片 ， 
需要 滑动 查看 。 

(7) 列表 导航 。 优 势 为 扩展 性 好 ， 内 容 条 目 显 示 多 ， 缺 点 是 表现 形式 单一 ， 信 
息 内 容 少 。 

〈8) 弹出 导航 。 优势 为 收拢 后 不 占 地 方 , 灵动 有 趣 , 缺点 是 不 够 正式 , 容易 挡 内容 。 

〈9) 瀑布 导航 。 优势 为 适用 于 大 量 图 片 展示 , 时 尚 感 强 , 缺点 是 显示 少 , 需要 滑 屏 。 

(10) 时 间 轴 式 。 优 势 为 有 时 间 罗 辑 性 先后 次 序 , 易 查询 , 缺点 是 太 多 的 话 需 滑动 。 

另外 ， 还 有 一 些 其 他 复合 导航 。 


2. 十 种 常用 网 页 导航 类 型 
(1) 顶部 水 平 栏 导 航 。 适 用 于 主页 导航 、 大 模块 功能 的 全 站 导航 ， 如 图 4.5 所 示 。 















































图 4.5 


(2) 竖 直 / 侧 边 栏 导 航 。 适 用 于 子 导 航 、 分 类 布局 、 功 能 和 选项 较 多 时 ， 如 图 4.6 
所 示 。 





4.6 
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(4) 面包 屑 导航 : 适用 于 层级 关系 、 线 性 索引 、 方 便 经 常 回 上 级 的 终端 页 面 ， 
如 图 4.8 所 示 。 


碟 ) Biocompare Home )F) LI) Mutagenesis Kits ，Mutation Generation System 
ME Fl | Mutagenesis Kis Mutation Generation System Kit(MGSm Kib from 
而 ) E ) ProductDscoven ) 1 ) + ) 1 ) Mutation Generation System Ki (MGS™ Kit) fro 


网) Biocompare Home ， Mutation Generation System™ 
4.8 


(5) 标签 导航 。 适 用 于 类 别 多 、 字 母 排序 、 类 别 分 类 ， 如 图 4.9 所 示 。 


Popular Tags 


EE CT CH CFD 








4.9 


(6) 搜索 导航 。 适 合 无 限 内 容 的 网 站 ， 也 常见 于 博客 和 新 闻 网 站 ， 以 及 电子 商 
务 网 站 ， 如 图 4.10 所 示 。 














区 





图 4.10 


(7) 弹出 式 菜单 和 下 拉 菜 单 导航 。 界 面 整洁 ， 下 级 子 类 也 能 被 访问 和 到， 隐藏 一 
些 不 想 一 下 子 被 用 户 看 到 的 子 菜单 ， 如 图 4.11 所 示 。 

(8) 分 面 /1 引导 导航 〈 下 拉 多 选 ) 。 也 叫 作 分 面 检索 或 引导 检索 ， 常 见于 电子 商 
务 网 站 ， 如 图 4.12 所 示 。 
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PORTFOUO 
DROPDOWN ITEM 
DROPDOWN ITEM 


DROPDOWN ITEM 


DROPDOWN ITEM 


DROPDOWN ITEM 





ESHAR| 


AT ON YOUR BROW3 
THE PITCH? GET YOUR| 
1000R MORE" ALLG| 





图 4.12 
(9) 页 脚 导航 。 次 要 导航 ， 可 能 包含 主导 航 中 没有 的 链接 ， 或 是 包含 简化 的 网 
站 地 图 链接 ， 版 权 信息 ， 或 者 普通 访问 者 不 是 很 关心 的 业务 内 容 ， 如 图 4.13 所 示 。 


ML me 


WSJ PE ws | Bloomberg 
























































(10) 全 屏 富 式 导 航 。 产 品 发 布 页 面 ， 适 合 高 端 产 品 或 者 专题 活动 页 ， 如 图 4.14 
所 示 。 
3 外 还 有 其 他 复合 导航 ， 如 图 4.15 所 示 。 


说 
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Studio Contact 

















@@ 4.3 优化 功能 优先 级 的 卡片 分 类 法 


在 我 们 设计 项 目的 时 候 , 可 能 想 去 实现 非常 多 的 功能 , 但 是 因为 产品 上 线 时 间 、 
项 目 成 本 等 因素 制约 ， 不 能 一 次 性 实现 所 有 的 需求 ， 所 以 就 要 制作 一 个 功能 优先 级 
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列表 ， 可 以 使 用 卡片 分 类 法 来 进行 功能 优先 级 评定 。 
1. 开放 式 的 卡片 分 类 。 用 户 按 自己 认为 的 卡片 功能 意义 ， 来 对 卡片 进行 分 类 和 
优先 级 排 定 ， 甚 至 可 以 更 改 功 能 名 称 。 
2. 封闭 式 的 卡片 分 类 。 其 中 分 类 标准 和 标签 是 固定 的 ， 用 户 只 能 把 标签 归 入 特 
定 的 分 类 内 ， 在 分 类 内 调整 优先 级 。 

其 中 需要 注意 以 下 5 点 。 

(1) 哪些 功能 常 被 放 在 一 起 。 

(2) 哪些 功能 在 分 类 的 时 候 很 纠结 。 

(3) 哪些 新 标签 和 功能 被 活动 在 卡片 。 

(4) 是 否 有 功能 被 重复 归 类 在 不 同 组 别 中 。 

(5) 是 否 能 形成 新 的 大 类 组 别 。 

卡片 分 类 如 图 4.16 所 示 。 















































DOOD 


女 外 





图 4.16 


阶段 性 商业 目标 有 以 下 几 类 : 获取 大 量 用 户 、 提 高 品牌 知名 度 、 增 加 用 户 使 用 
时 间 、 增 加 产品 收益 、 专 注 做 好 一 个 工具 、 简 化 产品 功能 、 增 加 用 户 访问 频率 、 改 
善 产品 功能 、 改 善 产 品 用 户 体验 、 获 取 新 的 用 户 群 体 、 尝 试 新 产品 、 已 有 服务 线 上 化 、 
削减 成 本 、 占 领 市 场 份额 等 。 

不 同 的 商业 目标 其 实 对 功能 开发 的 优先 级 是 不 同 的 , 比如 要 获取 大 量 用 户 的 话 ， 
就 要 先 开发 大 部 分 人 通用 的 需求 。 而 已 经 有 大 量 用 户 的 产品 ， 就 需要 深 控 一些 有 亮 
点 的 需求 。 产 品 每 个 阶段 对 功能 开发 优先 级 是 不 同 的 。 



























































@@ 4.4 布控 数据 采集 节点 及 数据 监 


1. PV 〈Page View) 即 页 面 浏览 量 或 点 击 量 

PV 用 来 衡量 一 个 网 站 或 网 页 用 户 访问 量 。 具 体 说 ，PYV 值 就 是 所 有 访问 者 在 24 
小 时 〈0 点 一 24 点 ) 内 看 了 某 个 网 站 多 少 个 页 面 或 某 个 网 页 多 少 次 。PV 是 指 页 面 刷 
新 的 次 数 ， 每 一 次 页 面 刷新 ， 就 算 一 次 PV 流量 。 
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2.UV (Unique Visitor) 即 独立 访客 数 

指 访问 某 个 站 点 或 进入 某 个 网 页 的 不 同 IP 地 址 的 人 数 。 在 同一 天 内 ，UV 只 记 
录 第 一 次 进入 网 站 的 具有 独立 卫 的 访问 者 ， 在 同一 天 内 再 次 访问 该 网 站 则 不 计数 。 
UV 提供 了 一 定时 间 内 不 同 观众 数量 的 统计 指标 ， 而 没有 反映 出 网 站 的 全 面 活 动 。 通 
过 IP 和 cookie 是 判断 UV 值 的 两 种 方式 。 


3. IP 即 独立 IP 数 
IP 可 以 理解 为 独立 IP 的 访问 用 户 ， 指 1 天 内 使 用 不 同 卫 地 址 的 用 户 访问 网 站 
的 数量 ， 同 一 卫 无 论 访问 了 几 个 页 面 ， 独 立 IP 数 均 为 1。 如 果 两 合 机 器 使 用 同一 个 
IJP， 那 么 只 能 算是 一 个 IP 的 访问 。 


4. VV (Visit Viewr) 即 访问 次 数 

记录 所 有 访客 1 天 内 访问 了 多 少 次 你 的 网 站 , 同一 访客 有 可 能 多 次 访问 你 的 网 站 。 
从 访客 来 到 网 站 到 最 终 关 闭 网 站 的 所 有 页 面 离开 ， 计 为 1 次 访问 。 若 访客 连续 30 分 
钟 没有 新 开 和 刷新 页 面 ， 或 者 访客 关闭 了 浏览 器 ， 则 被 计算 为 本 次 访问 结束 。 


5. 电 商 类 产品 需要 监控 的 数据 举例 

(1) 流量 相关 数据 (IP、PV、 在 线 时 间 、 跳出 率 、 新 用 户 比 例 ); 订单 相关 数据 (总 
订单 、 有 效 订单 、 订 单 有 效率 、 总 销售 额 、 客 单价 、 毛 利润 、 毛 利率 ); 转化 率 相关 (下 
单 转化 率 、 付 款 转化 率 ) ; 

(2) 网 站 使 用 率 。IP、PV、 平 均 浏 览 页 数 、 在 线 时 间 、 跳 出 率 、 回 访 者 比率 、 
访问 深度 比率 、 访 问 时 间 比 率 ; 

(3) 运营 数据 。 总 订单 、 有 效 订 单 、 订 单 有 效率 、 总 销售 额 、 客 单价 、 毛 利润 、 
毛利 率 、 下 单 转化 率 、 付 款 转化 率 、 退 货 率 。 

常见 用 户 数据 转化 的 模型 如 图 4.17 所 示 。 












































































































































How do users find you? 


Do users have a great Hrst experlexce? 


Do users come back? 


How do you make money? 


Do users tell others? 





6. 数据 库 的 字段 设计 
数据 是 信息 的 载体 ， 是 可 以 被 计算 机 识别 存储 并 加 工 处 理 的 描述 客观 事物 的 信 
息 符号 的 总 称 。 所 有 能 被 输入 计算 机 中 ， 且 能 被 计算 机 处 理 的 符号 的 集合 ， 均 是 计 
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算 机 程序 加 工 处 理 的 对 象 。 客 观 事物 包括 数值 、 字 符 、 声 音 、 图 形 、 图 像 等 ， 它 们 
本 身 并 不 是 数据 ， 只 有 通过 编码 变 成 能 被 计算 机 识别 、 存 储 和 处 理 的 符号 形式 后 才 
是 数据 。 

数据 处 理 是 指 对 数据 进行 查找 、 插 和 入、 删除、 合并、 排序、 统计， 以 及 简单 计 
算 等 的 操作 过 程 。 

数据 库 (Database) 是 按照 数据 结构 来 组 织 、 存 储 和 管理 数据 的 仓库 。 数 据 库 有 
非常 多 的 类 型 ， 从 最 简单 的 数据 存储 到 复杂 的 表 结 构 数 据 库 ， 到 大 型 数据 库 和 海量 
数据 库 都 有 。 

建立 数据 库 步骤 如 下 。 

(1) 分 析 业 务 需求 ， 业 务 建 模 。 

(2) 切 分 业务 模块 。 

(3) 切 分 数据 粒度 。 

(4) 找 出 数据 的 共性 及 关联 性 。 

(5) 做 出 数据 表 〈Table) ， 定 义 每 个 字段 (Field) 的 名 称 和 数据 类 型 。 

(6) 当空 表 建 立 后 ， 就 可 以 进行 数据 的 录入 和 填充 查询 及 各 种 操作 了 。 

每 类 数据 库 的 字段 数据 类 型 和 大 小 定义 都 不 同 ， 具 体 可 参看 不 同 数据 库 的 帮助 
手册 。 下 面 枚 举 一 些 常见 的 数据 字段 类 型 ， 如 表 4.3 所 示 。 























表 4.3 

CE CE 
文本 Text 文字 、 数 字 型 字符 0 一 225 个 字符 
备注 Memo 文字 、 数 字 型 字符 0 一 65 536 个 字符 
数字 Number 数值 1、2、4 或 8 字 节 
日 期 /时 间 | Date/Time 日 期 和 时 间 8 字 节 
货币 Currency 15 位 的 元 ， 外 加 4 位 小 数 8 字 节 
自动 编号 ”| Auto Number “| 给 每 条 记录 自动 分 配 数字 ， 通 常 1 开始 4 字 节 
是 / 否 Yes/No 逻辑 字段 ，YES/NO，True/False 或 On/Off 1 比特 
OLE 对 象 ” | Ole Object 可 以 存储 图 片 ， 音 频 ， 视 频 或 其 他 最 多 1GB 
超 链 接 Hyperlink 指向 其 他 文件 的 链接 ， 包 括 网 页 
附件 Attachment 任何 支持 的 文件 类 型 
查阅 向 导 “| Lookup Wizard ”| 从 列表 框 或 组 合 框 中 选择 的 文本 或 数值 
整形 数据 。 | Integer 允许 -32 768 ~ 32 767 间 的 数字 2 字 节 
长 整形 数据 | Long 人 允许 -2 147 483 648 ~ 2 147 483 647 间 的 数字 | 4 字 节 
字 节 Byte 0 一 255 的 数字 0 一 255 的 数字 
单 精度 Single 单 精度 浮 点 ， 一 般 用 于 处 理 小 数 4 字 节 
双 精 度 Double 双 精 度 浮 点 ， 一 般 用 于 处 理 小 数 8 字 节 
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UI 交互 动 效 必修 课 


7. 交互 元 素 排版 中 的 格式 塔 理论 
格式 塔 是 德 文 Gestalt 的 译音 ， 意 思 就 是 “模式 、 形 状 、 形 式 ”。 格 式 塔 是 一 个 


著名 的 心理 学 派 ， 基 了 





核心 理论 : 人 们 总 是 先 看 到 整体 ， 然 后 再 去 关注 








这 个 学 派 的 格式 塔 视觉 原 


理 还 有 一 个 别 






























































“ 完 形 心理 学 ”。 


局 部 ， 人 们 对 事物 的 整体 感受 不 等 


















































于 局 部 感受 的 加 法 ， 视 觉 系统 总 是 在 不 断 地 试图 在 感官 上 将 图 形 闭 合 。 
所 以 我 们 在 进行 界面 元 素 划 分 的 时 候 ， 要 利用 格式 塔 原理 ， 把 元 素 归 类 、 凸 显 ， 
使 用 户 能 更 方便 地 找到 。 
5 个 视觉 格式 塔 常见 原则 举例 如 下 ， 如 图 4.18 所 示 。 
(1) Similarity 〈 相 似 ) 
(2) Proximity (接近 ) 
(3) Closure〈 闭 合 ) 
(4) Simplicity (简单) 
Similarity (相似 ) 
eoee @@@ ?e 
ene eee 。 @: 
@@@ @g@@ 0,... 
形状 辣 色 尺寸 
Proximity (接近 ) 
@@g@g@g@ @@ 【 
© @ 
Oooeoee @g@ ©® @ e@ © 
eeeee eo @ ® 
序列 接近 有 虑 高 接近 距 高 接近 
Closure ( 闭合 ) 
(cd 
光学 加 人 
6 3 和 
立体 闭合 轮 席 闭 合 线条 闭合 
Simplicity (简单 ) 
保持 简单 造型 复杂 不 可 辨识 
图 4.18 
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“交互 设计 原则 


UI 交互 动 效 必修 课 


@@ 5.1 交互 设计 六 原则 


(1) 可 用 原则 。 确 保 产品 本 身 是 有 用 的 ， 流 程 是 完善 的 ， 能 给 和 人们 提供 帮助 。 

(2) 预期 原则 。 为 用 户 考虑 每 一 个 过 程 所 需要 的 信息 和 功能 ， 如 告知 用 户 目前 
系统 所 处 的 状态 ， 随 时 随地 的 反馈 等 。 
(3) 可 控 原 则 。 让 用 户 可 以 自由 地 确定 或 取消 操作 ， 避 免 强 制 性 选项 等 ， 可 在 
引导 页 面 提供 一 个 “skip” 的 按钮 操作 。 

(4) 精简 原则 。 尽 量 减 少 用 户 的 操作 步骤 ， 提 高 效率 ， 把 系统 复杂 性 隐藏 起 来 ， 
将 易 用 性 展示 给 用 户 ， 降 低 短 期 记忆 载 苟 ， 用 词 简洁 ， 等 等 。 
(5) 一 致 原则 。 界 面 风格 的 一 致 性 、 布 局 的 一 致 性 、 功 能 的 一 致 性 、 同 一 功能 
操作 的 一 致 性 ， 以 及 心理 对 产品 的 认 知 一 致 性 。 

(6) 优美 原则 。 布 局 要 美观 ， 操 作 和 交互 要 流畅 ， 提 示 要 不 令 用 户 反感 ， 界 面 
大 小 适合 美学 观点 ， 感 觉 协调 舒适 ， 主 次 分 明 。 

交互 设计 原则 如 图 5.1 所 示 。 
















































































































































































@ 5.2 交互 设计 四 要 素 


(1) Object/People( 对 象 / 人 ) : 辨识 交互 对 象 行为 。 
(2) Activity 〈 行 为 ) : 专注 首要 活动 。 
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(3) Feature/Contexts( 功能 / 场 
景 ) : 选择 核心 功能 集 。 

(4) Technology (技术 ): 实现 技术 。 

交互 设计 4 要 素 如 图 5.2 所 示 。 


@ 5.3 人 类 擅长 归 类 


人 的 最 佳 短 期 记忆 单位 是 不 超过 7 
的 无 序 事物 ， 当 需要 记忆 的 事物 超过 7 
个 的 时 候 , 脑子 会 自动 帮 你 归 类 。 所 以 ， 
优秀 的 产品 导航 应 该 是 帮 用 户 按 一 定 的 
逻辑 顺序 分 类 的 ， 以 便于 用 户 循 着 提示 
逻辑 就 能 找到 想 要 的 功能 。 

把 最 重要 的 功能 放 在 手中 ， 而 把 
不 重要 的 丢掉 ， 扩 展 定义 项 或 者 隐藏 
起 来 。 

通过 唤起 用 户 的 认 知 (视力 、 声 音 、 触 摸 ， 甚 至 他 们 的 记忆 等 ) 来 设计 好 的 隐喻 。 

分 类 是 指 依据 事物 属性 或 者 特征 进行 区 分 和 类 聚 ， 并 将 结果 按 一 定 次 序 予 以 组 
织 的 方法 ， 这 也 是 符合 人 类 记忆 模式 的 方法 。 

常见 的 归 类 逻辑 如 下 。 

(1) 功能 相近 分 类 ， 首 字母 分 类 、 时 间 分 类 、 品 种 分 类 、 数 量 分 类 、 地 域 分 类 等 。 

(2) 不 同 的 产品 按照 自身 特性 也 会 有 不 同 的 分 类 方法 。 例 如 ， 书 籍 ， 可 以 按照 
作者 、 用 途 、 长 中 短篇 、 出 版 时 间 、 价 格 、 销 量 、 好 评 度 等 来 分 类 ， 宠 物 狗 可 以 按 
照 品种 、 产 地 、 体 积 大 小 、 毛 色 、 毛 长 等 来 分 类 ; 衣服 可 以 按 布料 、 季 节 、 款 式 、 
价格 、 颜 色 、 年 龄 、 性 别 等 来 分 类 ;学 生 可 以 按 学 校 、 专 业 、 年 龄 、 入 学 年 份 、 性 别 、 
成 绩 等 来 分 类 。 

所 以 ， 为 了 界面 功能 的 易于 查找 性 和 逻辑 编排 性 ， 我 们 要 把 产品 功能 在 合适 的 
使 用 场景 下 和 使 用 流程 中 进行 合理 的 分 类 及 编排 ， 让 用 户 很 方便 地 找到 和 操作 。 信 
息 也 要 按照 合理 的 分 类 去 展示 ， 以 节约 用 户 获 取信 息 的 查询 浏览 成 本 。 按 信息 功能 
分 类 ， 确 定 优先 级 。 











@ 5.4 人 的 脑 部 结构 和 意识 认 知 
交互 设计 是 需要 研究 用 户 心理 和 行为 意识 的 ， 努 力 去 创造 和 建立 的 是 人 与 产品 


及 服务 之 间 有 意义 的 关系 ， 本 节 分 析 人 脑 结构 与 意识 认 知 。 
脑 部 的 结构 对 应 的 人 类 心理 如 下 。 
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其 中 包括 仆 虫 脑 \ 哺乳 类 脑 、 灵 长 类 脑 、 大 脑 皮层 、 海 马 沟 回 、 杏 仁 体 、 脑 前 额 叶 。 

(1) 疏 虫 类 脑 。 是 人 最 内 层 的 脑 核 ， 它 负责 人 体 最 基础 的 血液 循环 、 呼 吸 、 潜 
意识 等 。 
因为 肘 虫 一 般 对 领地 意识 较 强 ， 所 以 对 危险 有 天 然 的 察觉 性 ， 且 有 强烈 的 斗争 
反射 机 制 。 疏 虫 类 的 子 代 一 般 是 卵 生 ， 亲 代 生 完 子 代 后 就 不 管 了 ， 甚 至 有 吃 掉 子 代 
的 情况 。 

(2) 哺乳 类 脑 。 和 、 听 反射 和 运动 、 姿 势 等 反射 的 皮层 下 
的 中 枢 ， 可 以 感受 到 触觉 、 。 哺 乳 类 的 子 代 有 几 星期 至 几 年 的 哺乳 期 ， 在 
哺乳 期 内 动物 会 对 子 代 产生 末 关 性 oe 但 是 很 多 雄性 子 代 一 旦 长 大 
就 会 被 亲 代 逐 出 领地 ， 自 己 觅 食 。 

(3) 灵 长 类 脑 和 大 脑 皮层 。 有 新 及 皮层 
更 多 的 功能 区 ， 拥 有 了 语言 专区 和 
逻辑 思维 区 域 ， 成 人 的 大 脑 皮质 表 
面积 约 为 1/4 平方 米 ， 约 含有 140 
亿 个 神经 元 胞 体 ， 每 天 能 记录 生活 
中 大 约 8600 万 条 信息 。 

脑 部 结构 如 图 5.3 所 示 。 

(4) 海马 沟 回 。 是 保存 人 类 短 。 四 冶 入党 寺 度 导 
期 记忆 的 部 分 ， 如 果 切 除 这 部 分 ， 图 5.3 
人 将 无 法 记录 最 近 的 记忆 。 

(5) 杏仁 体 。 决 定 人 的 同情 心 和 同 理 心 ,杏仁 体 比较 发 达 的 人 比较 富有 同情 心 。 

(6) 脑 前 额 叶 。 决 定 人 的 未 来 规划 性 ， 此 处 受 损 后 ， 人 的 行为 没有 未 来 规划 性 
变 得 鲁莽 且 直 接 。 

根据 心理 学 家 卡特 尔 的 研究 结果 ， 性 格 相关 元 素 包 括 乐 群 型 、 聪 慧 型 、 稳 定型 、 
特 强 型 、 兴 奋 型 、 有 恒 型 、 敢 为 型 、 敏 感 型 、 怀 疑 型 、 幻 想 型 、 忧 虑 型 、 实 验 型 、 
独立 型 、 自 制 型 、 紧 张 型 。 











新 皮层 


高 级 哺乳 动物 
和 人 类 








古 皮质 - 疏 行 动物 
中 间 皮 质 - 低 等 哺乳 动物 


@ 5.5 用 户 需 求 分 析 


用 户 需 求 体验 层次 如 图 5.4 所 示 。 


用 户 对 产品 的 需求 ， 第 一 个 层面 是 
注意 功能 应 用 ， 然 后 是 可 信和 度 ， 再 上 一 
层 是 好 用 度 ， 最 后 是 愉悦 性 。 

互联 网 的 需求 可 以 总 结 成 一 
“更 ” 字 ! prey 用 户 的 情绪 反应 将 使 他 们 的 


且 只 需要 前 三 个 需求 也 能 满足 。 
(1) 更 快 。 打 车 软件 、 支 付 软件 等 。 


























图 5.4 
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(2) 更 快 找 到 人 聊天 。QQ、 旺 旺 等 。 

(3) 更 快 结识 陌生 人 。 陌 陌 、 相 亲 网 站 等 。 

(4) 更 准确 查找 信息 。 地 图 导航 、 大 众 点 评 等 。 

(5) 更 便宜 。 淘 宝 、 团 购 、 拼 单 等 。 

(6) 更 多 。 天 猫 、 京 东 、 门 户 站 等 。 

(7) 更 方便 。 海 淘 、 代 购 等 。 

(8) 更 简单 。 点 餐 、 充 值 等 。 

(9) 更 美 。 美 图 秀 秀 、 美 拍 等 。 

(10) 更 挣 钱 。 微 商 、P2P、 各 种 宝 等 。 

(11) 更 晒 。 微 博 、 社 交 、 朋 友 圈 等 。 

(12) 更 好 玩 。 游 戏 、 微 信 游 戏 等 。 

(13) 更 多 答案 。 知 乎 、 豆 辩 、 知 道 等 。 

如 果 你 能 发 现 用 户 “ 更 ”的 需求 ， 并 且 找 到 解决 “更 ”的 方法 ， 就 发 现 了 新 的 
产品 价值 点 。 

用 户 的 需求 必定 要 是 真实 存在 的 ， 不 可 以 杜撰 需求 ， 或 者 把 自己 的 需求 认为 是 
用 户 的 需求 。 

在 很 多 时 候 用 户 会 因为 某 种 原因 作 虚 假 回 答 ， 或 者 未 经 思考 就 回答 ， 这 些 都 不 
能 反映 其 真实 的 自我 需求 。 

比如 下 面 几 个 案例 。 

(1) SONY 在 研发 新 游戏 机 外 形 的 时 候 ， 邀 请 了 100 个 测试 者 ， 问 他 们 喜欢 黑 
色 外 壳 还 是 黄色 外 壳 ， 很 多 人 填写 黄色 ， 而 SONY 把 黄色 和 黑色 外 壳 的 游戏 机 放 在 
测试 者 面前 让 他 们 带 一 全 回 家 的 时 候 ， 很 多 人 选 了 黑色 的 。 所 以 ， 要 看 用 户 做 什么 ， 
而 不 是 说 什么 。 

(2) 福特 在 推广 汽车 前 ， 去 问 用 户 ， 他 们 要 什么 样 的 运输 工具 ， 那 时 候 马 车 还 
是 非常 普及 的 运输 工具 ， 很 多 人 会 说 : “我 要 一 匹 更 快 的 马 。” 而 你 如 果 给 了 他 们 
汽车 后 ， 说 不 定 他 们 更 需要 的 是 汽车 。 

(3) 如 果 你 和 女 朋友 和 逛街， 她 说 : “ 俄 了 ”， 你 问 : “ 想 吃 什么 ”， 她 说 : “ 随 
便 ”， 如 果 你 带 她 去 吃 麻辣 泥 ， 除 非 关系 特别 好 或 者 她 喜欢 吃 ， 否 则 她 心里 一 定 会 
抱怨 你 小 气 ! 其 实 俄 了 只 是 表面 需求 ， 实 质 需求 也 许 是 想 去 浪漫 且 高 档 的 餐厅 用 餐 。 

(4) 沃尔玛 进入 中 国 的 时 候 ， 很 多 人 说 中 国人 消费 不 起 XX 类 品牌 的 货 ， 而 沃 
尔 玛 采用 翻 一 些 城市 小 区 生活 垃圾 的 方法 ， 发 现 中国 很 多 地 区 的 居民 都 有 消费 XX 
类 品牌 的 能 力 ， 进 入 中 国 市 场 后 ， 果 然 获 得 成 功 。 

所 以 ， 洞 察 用 户 内 心 真实 需求 ， 并 且 给 出 更 好 的 解决 方案 ， 是 我 们 需要 做 的 ! 
用 户 需求 必须 要 用 版 本 控制 ， 分 好 优先 级 ， 因 为 添加 过 多 的 需求 会 导致 开发 无 
法 按时 提交 版 本 ， 如 图 5.5 所 示 。 
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优秀 的 应 用 软件 应 满足 下 列 [需求 开发 























需 求 并 输入 客户 代表 项 求 采集 别 ”需求 分 析 员 输出 
(1) 满足 特定 用 户 群 体 的 需求 。 
(2) 满足 公司 战略 目标 的 需求 。 
(3) 满足 产品 展示 思想 的 需求 。 
(4) 满足 程序 极 客 炉 技 的 需求 。 
(5) 满足 设计 师 展 示 美的 需求 。 ee 
(6) 满足 市 场 运营 盈利 的 需求 。 联合] 
上 面 6 个 需求 说 起 来 简单 ， 但 是 

做 起 来 很 难 ， 因 为 有 些 需 求 会 相互 冲 站 

突 ， 且 部 门 间 会 争夺 对 自己 更 有 利 的 EE 

资源 ! 
产品 需求 的 来 源 如 下 。 
(1) 行业 分 析 。 


(2) 公司 产品 战略 。 

(3) 网 站 用 户 行为 分 析 。 包 括 网 站 用 户 购买 行为 、 点 击 流 等 。 

(4) 用 户 产品 反馈 。 包 括 用 户 访谈 、 邮 箱 建 议 、 用 户 投诉 、 监 控 行为 数据 。 

(5) 客户 需求 。 客 户 在 使 用 产品 的 过 程 中 所 提 的 建议 和 意见 ， 以 及 通过 客户 访 
谈 等 手段 得 到 的 需求 。 

(6) 竞争 对 手 产 品 分 析 。 直 接 作为 竞争 对 手 产 品 的 客户 去 试用 ， 获 得 竞争 对 手 
产品 相关 信息 。 

(7) 社会 化 媒体 ， 搜索 引擎 、IM、BBS、Blog、SNS 社区 、 百 度 知道 等 社会 
化 新 媒体 ， 以 及 传统 媒体 和 竞争 对 手软 文 等 。 

(8) 客服 人 员 。 包 括 呼叫 中 心 (电话 、 短 信 、 传 真 、 邮 件 等 ) ， 在 线 客 服 (IM、 
BBS、 留 言 板 、WebCall 等 ) 。 

(9) 运营 人 员 。 所 谓 互 联网 产品 是 运营 出 来 的 ， 任 何 成 功 产品 不 可 能 一 趴 而 就 ， 
公司 内 部 运营 人 员 在 运营 中 产生 的 需求 是 重要 的 需求 来 源 渠 道 。 

(10) 合作 伙伴 提出 的 需求 。 

(11) 市 场 营销 人 员 。 

(12) 销售 人 员 。 

(13) 财务 人 员 。 

(14) 技术 支持 。 


竞 品 是 竞争 产品 ， 


争 对 手 的 产品 ， 竞 品 分 析 顾 名 思 义 就 是 对 竞争 对 手 的 产品 


就 








进行 比较 分 析 。 最 重要 的 是 ， 你 应 该 知道 分 析 竞 品 的 目的 ， 这 样 才能 把 握 重 点 ， 快 
速 获取 自己 想 要 的 、 对 自己 产品 有 参考 价值 的 报告 。 

竞 品 分 析 包 括 以 下 几 点 。 

(1) 描述 分 析 。 文 字 描述 图 片 描述 竞 品 差距 。 

(2) 定性 分 析 。 说 明 我 们 和 竞 品 差距 在 哪里 。 

(3) 定量 分 析 。 说 明 我 们 和 竞 品 差距 有 多 大 。 

(4) 客观 分 析 。 有 客观 数据 或 客观 事物 比较 。 

(5) 主观 分 析 。 用 户 心理 使 用 场景 推测 比较 。 

(6) 横向 比较 。 把 竞 品 相似 的 功能 并 排比 较 。 

(7) 纵向 比较 。 把 竞 品 不 同 的 功能 独立 比较 。 

可 以 对 竞 品 的 产品 定位 、 目 标 用 户 群 体 特征 、 核 心 竞争 力 、 运 营 及 推广 策略 、 
渠道 投放 平台 、 营 销 手 段 、 市 场 份额 、 盈 利 模式 、 功 能 模块 、 视 觉 设计 、 交 互 布局 、 
程序 效能 包 体 容量 、 市 场 趋势 .业界 现状 .产品 优 缺 点 、 抽 出 产品 核心 模块 及 使 用 场景 、 
大 环境 、 竞 争 对 手 的 企业 愿景 、 产 品 定位 及 发 展 战略 等 进行 比较 分 析 。 

例如 ， 同 样 一 个 产品 A 公司 做 会 成 功 ， 但 是 换 同 级 别 的 B 公司 做 说 不 定 就 不 会 
成 功 。 

销量 高 的 用 户 与 产品 可 以 为 挣 钱 的 产品 吸引 用 户 流量 ， 所 以 刚 开始 只 针对 用 户 
也 是 可 行 的， 后 期 再 找 可 以 消费 转化 的 点 ， 找 到 用 户 的 “需求 点 ”， 如 果 找 不 到 ， 
如 何 让 用 户 抛弃 竞 品 ? 找 不 到 自己 产品 的 生存 优势 、 行 业 壁 垒 、 技 术 壁 又 、 特 点 等 ， 
要 如 何 存活 下 来 ? 

iPhone 和 iPod Touch 上 的 集成 地 图 比较 如 表 5.1 所 示 。 








表 5.1 
我 们 公司 : 隐形 竞争 对 手 : 
斗篷 掩盖 我 
$19.99 $2.99 
平均 评分 3.5 3.5 
尺寸 
OMB 327 21.3 
更 新 频繁 ， 无线 内 容 无 一 2009 年 (无 | 无 ~ 2009 年 (无 
更 新 发 布 2009) 
不 可 履 盖 | 北美 + 英国 罗 慕 伦 船只 





非常 高 


油 
隋 
囊 





Semiguise- 超 材料 
范围 图 有 有 ， 是 小 而 模糊 | 有 (更 难以 找到 )| 每 图 12 秒 差距 


、、 | 最 全 面 的 -向 导 | 相当 全 面 的 -在 线 ~ ”| 比较 全 面 的 - 难 | 最 不 全 面 的 - 非常 
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续 表 












































我 们 公司 : 隐形 | 竞争 对 手 : 有 雾 竞争 对 手 : 模糊 | ”竞争 对 手 : 
斗 禾 (模糊 ) 的 斗篷 视图 掩盖 我 
| 多 个 城堡 的 高 品 二 画 - 非 常 小 的 
地 图 图 片 | 。 质 照片 合理 高 品质 的 画 二 全 息 图 
和 有 (200%) 有 ， 但 是 隐藏 有 “(30000000%) 
声音 伪装 完成 可 以 听 到 打 喷 吨 | 不 是 没有 其 他 的 无 
、 “| 灵活 四 个 隐藏 选 | 人 ww。 | 相当 灵活 - 两 个 | 相当 灵活 -三 个 | 相当 灵活 -一 个 隐 
隐藏 选项 项 灵活 四 个 隐藏 选项 隐藏 隐藏 选项 茂 
部 分 只 隐藏 在 | 室外 的 山羊 和 绵 Es 
高 级 隐藏 | 有 - 包括 猫 和 蛇 有 - 猎 宇内 羊 dcoption | 只 有 在 晚上 工作 
Dementors Requires 无 ， 但 是 屏蔽 
Shield 有 有 限 的 10 分钟 Taliban/Al-qaeda 
综合 地 图 | 有， 一 作 在 任何 有 ,两 个 位 置 | 有 ， (RR 5 
有 ，hogwarts， 
位 置 搜索 | 地 区 ， 州 ， 邮 政 | 有, 州 | 有， 与 主 搜索 功 联 孝 
编 能 分 离 
码 
Ri 有 | | 
有 一 主 "和 “次 要 ”| 部 分 -与 其 他 字 
el 。 有 me as 天 
向 导 搜索 有 | 无 
尺寸 搜索 有 一 无 
其 他 搜索 
条 件 | 新版 本 与 变形 合 在 其 他 领域 加 无 
y 者 二 
on 
GPS 功能 | 时 间 转换 兼容 浮 粉 Dds 
x,Norexan-class 
Warbird 
用 户 昭 
请 康 有 无 无 
有 ， 到 霍 格 沃 医 
在 全 | 有 到 本 天 有 有 , 通过 小 D 键 | 无 
目前 通过 油 
口 键 -将 包 
De 括 Facebook、 二 无 无 无 
| Twitter 和 e-mail 
集成 更 新 
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@@ 5.7 如 何 玩 转运 营 


三 流 运营 玩 产 品 、 二 流 运营 玩 流 量 、 一 流 运营 玩 用 户 。 











运营 要 关注 和 涉及 的 工作 通常 包括 但 不 限于 以 下 3 个 方面 。Q 拉 新 ， 所 谓 拉 新 
就 是 为 你 的 产品 带 来 新 用 户 ; @ 留 存 ， 所 谓 留存 就 是 使 用 各 种 运营 手段 和 方法 确保 
用 户 被 拉 到 你 的 产品 或 站 点 上 之 后 ， 最 终 愿意 留 下 来 和 你 互动 ，@ 促 活 ， 即 “促进 
用 户 活跃 ”, 就 是 让 用 户 和 你 更 好 、 更 密切 地 互动 ,在 你 的 产品 或 站 点 上 玩 得 更 开心 ， 
得 到 更 多 的 满足 。 


1. 关于 “ 拉 新 ”需要 注意 的 事项 

首先 要 知道 目标 用 户 会 在 哪里 出 现 ， 然 后 使 用 热点 活动 、 邮 件 推广 、 广 告 投放 、 
席 毒 营销 、 微 博 推广 、 地 方 主流 媒体 、 网 站 、 请 大 V 或 段子 手 、 线 下 推广 、 用 户 激励 、 
积分 墙 合作 、 互 推 产品 、 应 用 商店 排行 、 交 叉 推广 与 曝光 、SEO 关键 字 优化 等 方式 ， 
这 里 需要 注意 的 是 ， 在 拉 新 前 一 定 要 把 数据 监测 节点 都 埋 入 产品 和 网 站 ， 这 样 才能 
进行 推广 效果 的 对 比 。 

比如 A 方案 是 在 某 聊 天 软件 弹 窗 中 做 广告 ， 每 周 40 万 元 ， 带 来 用 户 100 万 ， 这 
部 分 用 户 消费 转化 率 80 万 元 ，B 方案 是 在 某 门户 站 首页 做 广告 ， 每 周 40 万 元 ， 带 来 
用 户 120 万 ， 消 费 转 化 率 只 有 30 万 。 这 时 就 要 考虑 本 次 目标 是 得 到 更 多 的 用 户 数 ， 
还 是 以 获 利 优先 为 导向 ， 最 终 得 到 和 商业 目标 一 致 的 价值 最 大 化 的 推广 方案 。 


2. 关于 “留存 ”需要 注意 的 事项 
一 个 产品 第 一 批 种 子 用 户 是 非常 重要 的 ， 在 产品 同 质 化 严重 的 今天 ， 有 丰富 的 替代 
品 可 以 供用 户 使 用 ， 所 以 做 差异 化 、 精 细 化 的 服务 和 用 户 体验 是 能 留 住 用 户 的 最 好 办 法 。 


3. 提高 留存 率 常 用 方法 

奖励 制度 、 内 赠礼 物 、 会 员 制 度 、 身 份 头衔 、 社 交游 戏 、 社 交 分 享 、 品 牌 曝光 、 
口碑 营销 、 推 荐 新 用 户 奖励 , 吸引 用 户 在 网 站 上 分 享 心得 、 留 言 、 发 表 评 论 ， 比 如 赞美 、 
补充 、 提 问 、 辩 论 、 同 理 共 鸣 ， 让 用 户 有 归属 感 和 安全 感 ， 有 被 认同 、 被 尊重 、 爱 与 
被 爱 的 感觉 。 为 社区 增添 内 容 等 手段 增强 了 用 户 的 参与 感 ， 引 入 用 户 社交 关系 增加 迁 
移 成 本 , 增加 导航 的 明显 性 , 提示 其 他 用 户 可 能 感 兴趣 的 链接 信息 , 降低 网 站 的 跳出 率 。 
奖励 方式 如 图 5.6 所 示 。 

这 里 以 微 信 游戏 为 例 介 绍 一 下 游戏 中 增加 留存 率 的 方法 。 

(1) 成 就 荣誉 〈 困 难 任务 及 高 级 装备 虚拟 徽章 ) 。 

(2) 任务 奖励 《设计 成 长 的 任务 ， 虚 拟 货币 与 物品 奖励 ) 。 

(3) 等 级 升级 〈 分 数 和 技能 抵达 后 ， 提 示 等 级 ， 道 具 状 态 ) 。 

(4) 日 常 奖励 〈 每 日 登录 领 金币 积分 ， 每 日 签到 抽奖 ) 。 

(5) 重 返 游戏 ( 设 定 多 久 不 维护 就 会 死亡 的 宠物 及 损失 损坏 虚拟 财产 物品 》。 

(6) 定期 更 新 (版 本 里 增加 一 些小 功能 点 、 新 场景 、 新 角色 、 新 奖励 )。 

(7) 季节 性 内 容 (符合 当下 节日 和 季节 的 活动 及 场景 )。 
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(8) 玩家 社区 〈 提 供 玩家 交流 的 社交 板块 和 传达 想法 的 通道 ， 如 小 喇叭 、 私 信 
等 功能 ) 。 

(9) 收藏 品 〈 特 别 胜利 场景 截图 、 路 边 捡 的 特别 道具 、 通 关 路 径 盖 章 等 ) 。 

(10) 重 玩 价值 《增加 随机 路 径 和 随机 剧情 ， 并 根据 数值 变量 产生 不 同 剧情 ) 。 


———— 


;会 员 等 级 /奖励 制度 。， 较 小 奖励 ,中 等 奖励 ，。 较 多 奖励 。 ;特权 











4. 关于 “ 促 活 ” 需 要 注意 的 事项 

给 用 户 一 个 回来 的 理由 ， 推 送 新 活动 的 内 容 ， 鼓 励 用 户 上 传 原创 内 容 ， 扮 演 、 
雇佣 或 使 用 机 器 人 扮演 用 户 和 早期 种 子 用 户 互动 ， 并 且 使 用 户 得 到 很 好 的 体验 ， 形 
成 口碑 传播 。 比 如 ， 你 做 了 一 款 类 似 于 “ 陌 陌 ”的 陌生 人 社交 软件 ， 如 果 一 个 新 用 
户 使 用 你 的 产品 ， 最 近 的 一 个 投缘 的 人 都 离 你 500 公里 ， 你 肯定 不 会 再 用 了 。 如 果 
100 米内 就 有 一 个 志同道合 的 人 和 你 聊天 ， 你 会 觉得 这 产品 很 好 ， 哪 怕 对 方 只 是 个 机 
器 人 按照 词 库 在 回答 。 

制造 话题 ， 让 用 户 发 表 评 论 及 传播 。 管 理 偏向 更 具 价值 的 那 群 用 户 的 利益 。 钉 
造 典型 、 树 立 标杆 用 户 、 引 发 话题 、 引 导 用 户 的 从 众 心 理 。 发 送 限量 邀请 码 ， 提 供 
更 好 的 邀请 VIP 赠送 功能 。 产 品 在 运营 中 更 清晰 定位 目标 用 户 群 喜好 。 让 用 户 参 与 
产品 功能 及 版 本 的 更 新 及 完善 ， 这 方面 可 参考 MIUI 的 橙色 星期 五 。 注 重 监控 数据 、 
优化 关键 字 、 复 盘 之 前 的 广告 或 活动 效果 ， 收 集 用 户 意见 。 


5. 运营 文案 编写 

(1) 热点 争议 性 主题 。 针 对 热门 事件 发 表 观点 ， 题 目 要 非常 容易 被 挑刺 ， 正 方 、 
反方 偏 倚 严 重 的 论点 ， 留 下 可 被 攻击 的 明显 漏洞 。 

(2) 故事 案例 型 主题 。 故 事 要 出 乎 意料 ， 结 局 逆转 ， 或 者 发 人 深 省 ， 将 多 个 特 
例 加 工整 合 后 得 到 的 故事 或 案例 可 能 更 有 代表 性 。 

(3) 经 验 分 享 型 主题 。“ HOW TOX X ”“X X 攻略 ”“X X 秘籍 ”类 文章 ， 
突出 经 验 分 享 和 心得 ， 适 合 推广 产品 的 软文 ， 要 注意 是 受众 目标 用 户 群 需要 学 习 的 
知识 。 
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(4) 评比 类 型 的 主题 。“2016 年 十 佳 XX”“XxX 排行 榜 ”“ 人 生 必 看 的 
XX”“XxX 里 最 好 的 XX” 等 。 

(5) 新 闻 报 道 类 主题 。 记 述 时 间 、 地 点 、 发 生 的 事情 、 叙 述 一 个 观点 和 事件 。 

(6) 专家 评测 使 用 主题 。 先 介绍 评测 人 的 权威 性 ， 然 后 介绍 产品 的 各 个 功能 ， 














评测 人 以 自身 经 验 及 与 其 他 产品 进行 对 比 的 参数 报告 等 罗列 给 用 户 ， 提 高 用 户 信 
赖 度 。 

(7) 榜样 及 理想 生活 描述 类 。 比 如 明星 使 用 的 化 妆 品 、 最 热门 的 结婚 旅游 地 、 
地 中 海 式 家 具 等 。 

(8) 取悦 用 户 打 标 签 类 。“80 后 共同 拥有 的 XX”“ 天 生 骄 傲 的 情怀 XX”“ 果 
粉 就 是 这 么 忠实 Xx X ”， 注 意 用 情感 共鸣 引起 价值 观 的 统一 ， 带 动 消费 。 


6. 产品 运营 的 各 种 力 
传播 力 、 公 益 力 、 炒 作 力 、 亲 和 力 、 转 化 力 、 促 销 力 、 吸 引力 、 购 买 力 、 赞 美 力 、 
注意 力 、 余 波 力 、 冲 击 力 、 辐 射 力 、 核 心 技术 力 、 行 业 壁 侄 力 。 











@ 5.8 设计 的 价值 所 在 


1. 商业 市 场 价值 

为 完善 商业 体系 中 的 一 环 , 转化 出 商业 接口 。 例 如 , 各 种 商业 网 站 、 发售 的 产品 、 
宣传 广告 、 商 场 体验 店 等 。 

2. 社会 公共 价值 

为 更 好 地 服务 于 社会 体系 , 建立 的 公益 类 接口 。 例 如 ,公益 查询 系统 、 缴费 系统 、 
图 书 管理 系统 、 爱 心 捐赠 等 。 


3. 自我 表现 价值 

为 表现 自我 内 在 思想 技能 所 进行 的 创造 接口 。 例 如 , 概念 雕塑 、 服 装 设计 、 演 讲 、 
绘画 、 视 觉 艺术 、 行 为 艺术 等 。 

良好 和 不 良 的 设计 价值 表现 如 下 。 

(1) 良好 的 设计 价值 。 产 品 应 该 是 可 用 的 、 有 用 的 。 产 品 帮助 用 户 实现 目标 和 
解决 问题 。 产 品 满足 商业 盈利 和 技术 开发 需求 。 产 品 应 该 改善 人 们 生活 ， 满 足 用 户 
期 望 。 

(2) 不 良 的 设计 价值 。 流 程 不 通 ， 功 能 低 效 浪费 用 户 时 间 、 无 用 的 功能 不 能 满 
足 用 户 期 望 。 对 用 户 心 理 造成 伤害 ， 给 用 户 造成 困惑 、 不 舒服 、 被 强迫 、 无 趣 、 烦 
躁 的 感觉 。 社 交 伤 害 ， 泄 露 用 户 隐私 、 冒 犯 用 户 、 侵 犯 用 户 的 尊严 。 破 坏 性 操作 ， 
造成 用 户 损失 、 减 少 用 户 收益 。 

启发 式 评估 法 就 是 使 用 一 套 简 单 、 通 用 、 有 启发 性 的 可 用 性 原则 来 进行 的 可 
性 评估 。 即 几 个 评审 人 员 根 据 一 些 通用 的 可 用 性 原则 和 自己 的 经 验 来 发 现 产品 的 可 
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性 问题 。 有 试验 表明 ， 每 个 评审 人 员 平 均 可 以 发 现 35% 的 可 用 性 问题 ， 而 5 个 评 
审 人 员 可 以 发 现 大 约 75% 的 可 用 性 问题 。 一 般 我 们 使 用 尼尔森 10 定律 来 对 系统 进行 
可 用 性 评估 ， 如 图 5.7 所 示 。 



















































































10 可 用 性 启发 式 


系统 状态 可 见 性 识别 ， 而 不 是 回忆 


系统 与 现实 世界 的 匹配 灵活 性 和 使 用 效率 
2 用 户 控制 和 自由 美学 与 简约 设计 

一 致 性 和 标准 帮助 用 户 识别 、 诊 断 和 从 错误 中 恢 和 | 

错误 的 预防 帮助 和 文档 





图 5.7 


@ 5.9 尼尔森 可 用 性 十 原则 


尼尔森 (Jakob Nielsen) 是 毕业 于 丹麦 技术 大 学 的 人 需 严 
机 交互 博士 ， 他 拥有 79 项 美国 专利 ， 专 利 主要 涉及 让 互 ” 恬 | 
联网 更 容易 使 用 的 方法 。 尼尔森 在 2000 年 6 月 入 先 了 斯 站 
堪 的 纳 维 亚 互 动 媒体 名 人 堂 ， 并 在 2006 年 4 月 被 邀请 加 
入 美国 计算 机 学 会 人 机 交互 学 院 ， 被 赋予 人 机 交互 实践 
的 终身 成 就 奖 。 他 还 被 纽约 时 报 称 为 “Web 易 用 性 大 师 "， 时 


被 Internet Magazine 称 为 “ 易 用 之 王 ”， 如 图 5.8 所 示 。 
1. 系统 状态 可 见 原则 《Visibility of system status) 
让 用 户 随 时 知道 (系统 ) 目前 处 于 什么 状态 ， 在 干什么 ， 及 时 反馈 用 户 信息 。 

用 户 在 网 页 上 的 任何 操作 ， 不 论 是 单 击 、 滚 动 ， 还 是 按 下 键盘 ， 页 面 应 即时 给 

出 反馈 ， 如 图 5.9 所 示 。 


2. 匹 配 系统 与 真实 世界 (环境 贴切 ) (Match between system and the real 
world) 
产品 的 信息 和 操作 逻辑 符合 真实 世界 的 一 些 惯例 和 人 类 思考 的 常规 逻辑 。 
界面 上 的 隐喻 、 模 拟 情 景 等 设计 都 是 为 了 让 产品 符合 真实 的 世界 ， 让 产品 便于 
户 理解 使 用 ， 如 图 5.10 所 示 。 


“2 


time 
图 5.9 加 5.10 
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3. 用 户 的 控制 性 和 自由 度 ( 撤 销 重 做 原则 ) 《User control and freedom) 

户 在 使 用 产品 的 过 程 中 可 以 自由 进退 、 撤 销 、 重 做 、 保 存 工 作 ， 遇 到 非 正 常 

意外 时 系统 提供 可 离开 及 补救 措施 ,确保 用 户 不 会 丢失 他 们 的 工作 ， 如 图 5.11 所 示 。 
4. 一 致 性 和 标准 化 (一 致 性 原则 ) 〈Consistency and standards) 
产品 在 遵循 系统 平台 惯例 的 基础 上 也 要 保证 产品 功能 操作 、 控件 样式 、 界 面 布 局 、 

提示 信息 的 一 致 性 ， 如 图 5.12 所 示 。 


5. 防止 用 户 出 错 原则 〈Error prevention) 

在 用 户 容易 出 错 的 地 方 设 有 预防 措施 或 直接 把 出 错 的 可 能 性 去 掉 ， 避 免 错 误 的 
发 生 。 对 产品 页 面 的 设计 、 布 局 、 规 则 进行 反复 验证 ， 把 发 生 错误 的 可 能 性 降 到 最 低 ， 
如 图 5.13 所 示 。 


< > 1 x 局 口 
x Vv 


(a) 
图 5.11 图 5.12 图 5.13 
































































































































6. 识别 比 记 忆 好 Recognition rather than recall) 

采用 明确 的 操作 提示 和 符号 文字 , 减少 用 户 的 记忆 负担 ， 分 类 及 信息 结构 清晰 ， 
简单 明了 ， 便 于 理解 。 功 能 块 布局 合理 ， 在 用 户 可 见 范围 内 ， 或 使 用 “联想 推理 ” 
可 以 不 费力 地 找到 ， 如 图 5.14 所 示 。 



































Fill the list Fill the list Are you sure 

User Grover User Grover User Grover 
pp 

see asd p> | 

we D4 | Ne. No 1234 





图 5.14 


7. 使 用 方便 快捷 (灵活 高 效 原则 ) 《Flexibility and efficiency of use) 
让 用 户 可 以 使 用 最 少 的 步骤 ， 快 捷 地 完成 操作 任务 。 


8. 信息 一 目 了 然 〈 易 扫 原 则 ) (Aesthetic and minimalist design) 

在 产品 设计 或 界面 中 ， 让 你 的 信息 一 目 了 然 ， 信 息 结构 简单 ， 突 
弱化 干扰 内 容 和 信息 ， 如 图 5.15 所 示 。 

9. 帮助 用 户 识别 、 诊 断 ， 并 从 错误 中 恢复 〈 容 错 原则 ) 《Help users recognize， 
diagnose, and recover from errors) 

破坏 性 操作 前 要 有 提示 ， 提 示 用 户 错误 产生 的 原因 ， 并 提供 其 他 备 选 操作 方案 
完成 任务 。 创 意 404 页 面 可 以 降低 用 户 对 错误 的 抵触 情绪 ， 如 图 5.16 所 示 。 


























出 重要 内 容 ， 
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Jakob Nielsen, Ph D., 

se Uer Merweste md princival rte Neen ora Ca 
een 

De Mieleon eviobiiabe the sinoment wmabiliny engiacering mere- 

poset ef eh 

vented weveral veabily perhode, inclading beeristic coaloarion 

eda aie Smee eats mainly on wiys of making the 

Ineraet essier wo use. 


5.15 图 5.16 





10. 帮助 文档 (人 性 化 帮助 原则 ) (Help and documentation) 
提供 详细 的 帮助 文档 ， 并 且 条 理 清晰 ， 易 于 搜寻 对 应 的 问题 答案 ， 用 词 准 确 易 
于 理解 ， 如 图 5.17 所 示 。 









































S O S Whatps this? 


图 5.17 


@ 5.10 长 尾 理论 和 个 性 化 设置 


长 尾 (The Long Tail) 理论 是 网 络 时 代 兴起 的 一 种 新 理论 , 这 一 概念 是 由 《 连 线 》 
杂志 主编 安德森 (Chris Anderson) 在 2004 年 10 月 的 “长 尾 ” 一 文中 提出 的 。 长 尾 
理论 认为 ， 由 于 成 本 和 效率 的 因素 ， 过 去 人 们 只 能 关注 重要 的 人 或 重要 的 事 ， 如 果 
正 态 分 布 曲线 来 描绘 这 些 人 或 事 人 们 只 能 关注 曲线 的 “ 头 部 ”, 而 将 处 于 曲线 “ 尾 
8” 需要 更 多 的 精力 和 成 本 才能 关注 到 的 大 多 数 人 或 事 忽 略 。 安 德 森 认 为 ， 网 络 时 
代 是 关注 “长 尾 ”、 发 挥 “ 长 尾 ” 效 益 的 时 代 。 

关于 长 尾 理论 的 内 涵 ， 简 单 地 说 ， 就 是 当 商品 存储 流通 展示 的 场地 和 渠道 足够 
宽广 ， 商 品 生产 成 本 急剧 下 降 以 至 于 个 人 都 可 以 进行 生产 ， 并 且 商 品 的 销售 成 本 和 急 
剧 降 低 时 ， 几 乎 任何 以 前 看 似 需求 极 低 的 产品 ， 只 要 有 卖 ， 都 会 有 人 买 。 

应 用 到 软件 开发 来 说 ， 在 早期 软件 生产 力 低下 ， 功 能 机 、 智 能 机 容量 小 且 可 扩展 
性 差 的 时 代 ， 大 家 都 会 集中 精力 去 开发 各 种 基础 功能 APP 软件 ， 比 如 相机 功能 ， 后 期 
出 现 了 女性 手机 ， 加 入 美 颜 功能 ， 或 者 夜 拍 增强 这 类 的 个 性 化 功能 。 而 音乐 软件 也 从 
最 初 的 播放 器 ， 变 成 了 一 些 独 特 的 、 拥 
有 不 同 曲 库 分 类 推荐 的 个 性 化 播放 器 。 

只 要 找到 用 户 的 一 个 需求 ， 并 且 围 
绕 需求 场景 好 好 挖掘 ， 如 果 你 能 发 现 一 
个 用 户 群 的 共性 和 需求 ， 就 找到 了 自己 
的 目标 用 户 群 。 

长 尾 理论 示意 图 如 图 5.18 所 示 。 
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在 找到 目标 用 户 群 后 ， 针 对 用 户 做 的 交互 设计 应 注意 以 下 3 点 。 





1. 珍惜 用 户 的 时 间 ， 把 用 户 想 象 成 聪明 但 是 很 忙 的 人 











用 户 等 待 时 间 感 想 及 解决 方案 ， 如 图 5.19 所 示 。 


等 待 时 间 。 ”用 户 感想 解决 方案 








© BH Nice 直接 跑 转 
@ 05- 玛 。 xB 受 LOADING 动 画 
3-10B 。 妇 提示 百分比 进度 
人 @) 10-30 秒 还 要 等 多 久 ? 。 提示 百分比 进度 及 网 络 及 数据 库 响应 情况 
四 zp 地! 提供 取消 刍 
图 5.19 


2. 形 、 色 、 意 的 提示 ， 让 操作 和 选择 变 得 清晰 


只 有 颜色 的 区 别 : 色盲 辨认 不 出 。 加 上 了 造型 的 区 别 :， 有 歧义 。 加 上 了 文字 的 


说 明 : 明确 富 意 ， 如 图 5.20 所 示 。 


控件 识别 性 
© Vv 
@ Xx 
图 5.20 
3. 减少 选择 
Hick’s Law / 〈 希 克 法 则 ) ， 如 图 5.21 所 示 。 
四 天 
时 
间 
可 选择 的 数量 
图 5.21 
一 个 人 面临 的 选择 越 多 ， 做 决定 所 需要 时 间 就 越 长 。 


其 他 交互 设计 注意 事项 如 下 。 


(1) 界面 的 主 功 能 区 要 有 鲜明 对 比 让 人 容易 区 分 ， 其 他 功能 


以 
添加 成 功 
Xx 
添加 失败 





区 进行 归 类 区 分 。 


(2) 使 用 对 齐 方 式 , 通过 间距 、 颜色、 缩 进 、 字 体 大 小 、 元 素 尺寸 等 方式 来 凸显 。 
(3) 主要 流程 按钮 要 与 同一 界面 上 的 其 他 按钮 易于 区 分 ， 能 望 文 知 意 最 好 。 
(4) 适当 的 默认 值 和 预先 填充 好 表单 字段 可 以 大 量 减少 用 户 调整 数值 的 工作 量 。 








063 


UI 交互 动 效 必修 课 





(5) 完成 同一 功能 或 人 有 








(6) 同一 界 画 














(7) 复 选 框 和 选项 框 按 选择 概率 的 高 低 作 先 后 排列 。 





(8) 适时 出 
(9) 界面 空 











间 











(10) 关注 价值 核心 ， 排 定 功 
性 强 的 软件 要 使 











(11) 专 } 





(12) 菜单 深度 尽力 控制 


(13) Less is more 〈 人 少 只 




















能 优先 级 ， 
相关 的 专业 术语 ， 通 


现 提 示 与 线索 ， 让 功能 容易 被 找到 。 
较 小 时 ， 使 用 下 拉 框 而 不 用 选项 框 或 弹 ! 
砍 掉 残缺 功能 








用 。 


E 务 的 元 素 集中 放置 ， 减 少 操作 移动 的 距离 。 


上 的 控件 数 最 好 不 要 超过 10 个 ， 超 过 后 建议 分 页 或 折 又 。 


bt 列表 。 














(14) 一 条 工具 栏 的 长 度 不 能 超出 屏幕 宽度 。 

















(15) 








户 可 以 上 


关键 词 





在 帮助 索引 





(16) 全 局 导航 尽 可 能 一 直 存 在 ， 并 且 在 醒目 位 置 。 


(17) 跟随 大 众 的 


能 


带 来 很 好 的 体验 。 





[x 


(18) 界面 设计 尽量 保持 一 致 性 成 为 普遍 遵循 的 准 册 

















使 有 





| 











方向 ， 元 素 的 表现 
户 学 习 成 本 。 
(19) 屏幕 对 

















下 





式 、 位 置 、 大 小 、 形 状 等 ， 以 及 同 

















线 相交 的 位 置 是 上 














意 力 的 位 置 ， 放 置 醒目 











搜索 所 要 的 帮助 。 


性 界面 则 提倡 使 





























在 3 层 以 内 ， 菜 单 排 布 有 逻辑 性 可 推导 。 
是 多 ) ， 减 少 认 知 负担 ， 精 简 文 字 信息 。 























户 直 视 的 地 方 ， 了 


信息 时 要 注意 利用 这 两 个 位 置 。 


(20) 提示 、 警 告 或 错误 说 明 应 该 清楚 、 明 了 、 恰 当 。 
(21) 对 可 能 引起 致命 错误 或 系统 出 错 的 输入 字符 或 动作 要 加 以 限制 或 屏蔽 。 





(22) 对 可 














户 位 置 、 上 














(24) 不 要 打 断 


死 循环 。 





























(25) 


动 保存 


户 填写 信息 ， 比 如 写 到 

















劳动 成 果 ， 并 且 提 供 一 
(26) 精简 表单 填写 ， 初 期 注册 只 需要 最 基本 的 信息 ， 


完善 表单 。 


(27) 把 任务 合理 分 解 成 没有 压力 的 小 步骤 ， 加 以 适当 提示 和 引导 ， 辅 助 





成 任务 。 


清理 功能 。 








(28) 欢迎 页 面 和 引导 页 ， 

















(29) 向 


户 提供 意见 反馈 








的 窗 



































(30) 给 重度 





户 提供 


帮助 开发 者 完善 产品 。 
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的 











用 





E 上 方 1/4 处 是 最 吸引 














能 造成 等 待 时 间 较 长 的 操作 应 该 提供 取消 功能 。 
(23) 状态 条 要 能 显示 用 户 切实 需要 的 信息 ， 常 用 的 有 
户 信息 、 提 示 信 息 、 错 误 信息 等 。 
户 流程 ， 测 试 是 否 会 有 中 断 流程 、 中 断 











习惯 ， 标 新 立 异 的 操作 习惯 会 增加 学 习 成 本 ， 除 非 新 操作 


上 外， 一 致 的 界面 ， 包 括 颜色 、 


一 个 控件 的 操作 方式 以 减少 


户 注 


目前 的 操作 、 系 统 状态 、 


后 无 法 继续 的 流程 或 者 


表单 ， 不 要 让 用 户 丢失 























其 他 奖励 手段 鼓励 























户 


户 


中 





展示 产品 带 来 的 好 处 ， 而 不 要 罗列 产品 特性 。 














， 便 于 修改 完善 ， 每 个 阶段 都 要 进行 测试 。 





些 高 级 功能 ， 或 者 优先 、 免 费 体 验 版 本 的 权利 ， 他 们 会 





AE 基础 及 MG 动 效 


二 | SS 
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本 章 主要 通过 几 个 案例 来 讲解 AE 基础 动画 及 MG 小 动画 的 制作 方法 ， 包 括 16 
个 案例 ， 具 体 如 下 。 
1. AE 基础 动画 
@O 导入 素材 输出 格式 
@ 动态 二 维 码 的 5 个 属性 
@@ 常用 工具 栏 及 摄像 机 功能 
人 @ GIF 生成 
2. MG 小 动画 
@ 海豚 动态 二 维 码 
@ 微 信 图 标 修剪 动画 
@@ 水 滴 融 合 动画 
@@ 小 球 组 字 
@ 蒙 版 水 波 
@ 鲁 鱼 路 径 动画 
@ 汉堡 走路 
@ 烟花 
@@ 几何 变形 动画 
@@ 边 角 定 位 
@@ 模糊 效果 
@@ 发 光 






























































@@ 6.1 AE 基础 动画 
本 节 将 讲解 UI 动 效 中 AE 基础 动画 制作 及 AE 基本 操作 。 


6.1.1 导入 素材 输出 格式 
在 学 习 案 例 之 前 ， 首 先 学 习 AE 的 素材 导入 。 
1. 新 建 合成 及 导入 素材 
1) 新 建 合 成 
Step01 在 菜单 栏 中 单 击 “ 合 成 > 新 建 合成 ”命令 ， 如 图 6.1 所 示 。 


Ea) EE) PD) DEA REV EO wep 


0- Cu 
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Step02 在 弹出 的 “合成 设置 ” 
续 时 间 ”， 如 图 6.2 所 示 。 
@ 新 建 合成 方法 二 














窗口 中 , 设置 “宽度 ”和 “高 度 ” 的 尺寸 , 以 及 “ 持 





























在 项 























窗口 中 单 击 鼠 标 右键 并 选择 “新 建 合成 ”命令 ， 如 图 














图 6.2 
@ 新 建 合成 方法 三 
在 项 目 窗口 下 方 单 击 国 “ 新 到 
2) 导入 文件 






































6.3 所 示 。 








后 丰 3 


新 建文 伍 关 

新 建 Adobe Photoshop 文件 
新 建 MAXON CINEMA 4D 文件- 
SA 入 

号 入 最 近 的 村 时 


图 6.3 


合成 ”图 标 来 新 建 合成 ， 如 图 6.4 所 示 。 


Step01 选择 “文件 > 导入 > 文件 ”或 “多 个 文件 ”命令 ， 如 图 6.5 所 示 。 








EH) wo) sa se 


新 建 (N) 

打开 项 目 (O)-- 
打开 最 的 项 目 

在 Bridge 宁 测 这 
3O 

5 

保存 (5) 

另存 为 (S) 


效果 (1) 


动 要 (A) 


视 上 (V) 使 口 ”大 殷 (H) 







coalo 


Cul+Ah+Shit+O 


CosW 


Gul+s 


CulsAl+Shift+S 







Cl 
CerlrAl+l 


i 

+ 多 人 文件 - 沁 

， | Adobe Premiere Pro 项 
Pro Import After Effects... 
Vanishing point (vpe). 

点 位 符 . 


Cul+F a 
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Step02 选中 要 导入 的 素材 将 其 导入 ， 如 图 6.6 所 示 。 

















CR sas 9 CI 
Rv 圭 建 文件 去 已 本 
PE 
到 
ea EL - 生 ~» = 
人 Rn 








图 6.6 


3) 将 素材 文件 添加 到 时 间 轴 











Step01 可 以 将 项 














窗口 


中 的 文件 直接 拖 蝶 到 合成 中 的 时 间 轴 上 ， 如 图 6.7 所 示 。 





图 6.7 














中 的 文件 拖 披 到 合成 查看 器 〈 和 舞台 ) 中， 如 图 6.8 所 示 。 

















Step02 也 可 以 将 项 
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6.8 


2. PSD 导入 

Step01 按 快捷 键 CtrltI 打开 “导入 文件 ”窗口 ， 在 “导入 为 ”中 可 选择 3 种 不 
同 的 方式 ， 如 图 6.9 所 示 。 

Step02 随意 选择 一 项 导入 ， 单 击 导 入 后 会 弹出 “素材 分 层 .psd” 窗 口 ， 在 “ 导 
入 种 类 ”中 可 选择 3 种 方式 (素材 、 合 成 - 保持 图 层 大 小 、 合 成 )， 在 “图 层 选项 ” 
中 可 选择 与 导入 种 类 对 应 的 图 层 选 项 方式 ， 如 图 6.10 所 示 。 








































































































图 6.10 

Step03 首先 设置 “导入 种 类 ”为 “素材 ”， 可 以 看 到 “图 层 选项 ”中 可 控制 两 
种 方式 : “合并 的 图 层 ” 与 “选择 图 层 ”， 这 里 选择 “选择 图 层 ”， 可 以 看 到 右 侧 
可 选择 的 单个 图 层 ， 如 图 6.11 所 示 。 
Step04 图 层 下 方 还 有 两 项 参数 可 选择 ， 分 别 是 “合并 图 层 样式 到 素材 ”和 “和 忽 
层 样 式 ”， 如 图 6.12 所 示 。 





网 





























































































































出 





略 
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过 

四 
河 
蓄 
下 





到 6.13 所 示 为 单个 图 层 的 效果 。 











Step05 早生 














图 6.13 








Step06 若 “ 图 层 选 项 ”设置 为 “合并 的 图 
慨 ”， 单 击 “ 确 定 ” 按 钮 ， 结 果 如 图 6.14 所 示 。 

































































图 6.14 
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Step07 可 以 看 到 PSD 所 有 的 图 层 合并 了 , 效果 类 似 一 张 PNG， 如 图 6.15 所 示 。 














图 6.15 


Step08 若 选 择 “ 导 入 种 类 ”为 “合成 -保持 图 层 大 小 ”， 选择 “图 层 选 项 ”为 “可 
编辑 的 图 层 样式 ”， 则 分 层 PSD 效果 如 图 6.16 所 示 。 

Step09 可 以 看 到 项 目 窗口 中 多 了 一 个 合成 ， 这 个 合成 中 包含 许多 图 层 ， 如 图 6.17 
所 示 。 

























































































吉村 分 屋 个 国民 
1 











图 6.16 








I 


Step10 大 家 可 以 按 自己 的 需要 导入 PSD 元 素 ， 如 图 6.18 所 示 。 
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块 设置 ”， 可 以 输出 多 种 格式 ， 


3. 泻 染 导出 


图 6.18 


er ， 可 以 选择 “文件 > 导出 > 添加 到 泻 染 队列 ”命令 ， 如 
图 6.19 所 示 。 








新 建 (N) 
打开 项 目 (DO)… 
打开 最 近 的 项 目 


关 半 (9O 

关闭 项 目 

保存 (S) 

另存 为 (S) 

增 量 保存 Ctr+Alt+: 
焦 复 (RR) 

导入 0 

导入 最 的 素材 

导 当 09 

从 Typekit 添加 字体 


Adobe Dynamic Link 





Step02 在 泻 染 队列 面板 的 “输出 模块 ”的 右 侧 单 

















在 Bridge 中 浏览 . Ctrl+Ak+Shif+O 





Cel+O 


Cerl+W 


Ctrl+S 


Shift+S 


编辑 (E) “合成 (C) ”图 层 (D。 效果 (D) 动画 (A) 视图 (V) 窗口 ”帮助 (H) 


此 Adobe Premiere Pro 项 目 … 
MAXON CINEMA 4D Exporter... 
添加 到 Adobe Media Encoder 队列 … 


图 6.19 



































Time 格式 等 ， 单 击 “ 确 定 ” 按 钮 ， 刀 


072 











0 图 6.20 所 示 。 


添加 到 泻 染 队 列 (A) 


的 是 “PNG” 序 殉 











“无 损 ”， 进 入 “输出 模 
“Targa” 序 列 以 及 Quick 


第 6 章 AE 基础 及 MG 动 效 





6.20 


Step03 在 “输出 模块 ”的 “输出 到 ”中 选择 输出 路 径 ， 如 图 6.21 所 示 。 


时 点 
通 最 访问 的 位 置 


EL 
国 杭 二 
辣 国 上 
文科 
和 


尘 计 车 机 
入 800TCAMP (C: 
» Macintosh HD ( 


me 
文件 名 (N)， 万 至 五 二 堆 码 卡通 3-01 
全 存 灶 型 [)，AVICev 





6.21 











Step04 单 击 泻 染 右 侧 的 “ 泻 染 ” 按 钮 ， 进 行 泻 染 。 
Step05 可 以 看 到 泻 染 的 进度 ， 如 图 6.22 所 示 。 
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图 6.22 


输出 完成 后 ， 在 指定 文件 夹 中 可 以 查看 输出 的 视频 和 序列 帧 ， 以 便于 后 期 制作 
GIF 或 者 视频 ， 如 图 6.23 所 示 。 
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万 至 节 一 堆 玛 卡通 3.01 长 要 000001 He 1333 -= 
抽风 各 大 je 316 MB Hg 2367 fr 2016/11/14 1545 
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6.1.2 ”动态 二 维 码 的 5 个 属性 


本 小 节 将 讲解 制作 动态 二 维 码 的 5 个 关键 属性 ， 分 别 是 锚 点 、 缩 放 、 透 明度 、 
视频 小 动画 位 置 及 旋转 。 
1. 锚 点 
Step01 打开 素材 源 文件 “二 维 码 锚 点 .aep”， 单 击 “ 泳 圈 ” 图 层 前 的 箭头 图 标 
将 其 展开 ， 在 “变换 ”属性 中 找到 “ 锚 点 ”属性 ， 也 可 以 按 快捷 键 A， 开 启 锚 点 属性 ， 
单 击 锚 点 前 的 码 表 图 形 对 锚 点 进行 关键 帧 设置 ， 如 图 6.24 所 示 。 
也 可 以 单 击 工具 栏 中 的 圈 “ 向 后 平移 ( 锚 点 ) 工具 ”按钮 ， 调 整 锚 点 的 中 心 位 置 。 
Step02 将 时 间 线 移 至 第 25 帧 ， 再 次 为 锚 点 设置 一 帧 关键 帧 〈 与 第 0 帧 一 致 ) ， 
如 图 6.25 所 示 。 
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Step03 在 第 63 帧 处 ， 将 锚 点 


Step04 当 锚 点 





如 图 











6.27 所 示 。 


6.24 











居中 ， 素 材 绕 
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[2 











6.25 
位 置 移 动 到 泳 圈 图 

















刁 的 I 


E 下 方 ， 如 图 6.26 所 示 。 











h 心 点 旋转 。 当 错 点 偏 1 





下 ， 素 材 按 素材 边缘 旋转 ， 
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图 6.26 





图 6.27 
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锚 点 在 素材 不 同位 置 ， 会 影响 素材 的 旋转 和 缩放 中 心 点 。 

2. 缩放 与 透明 度 

Step01 打开 素材 源 文件 “万 圣 节 glow.aep”， 选 中 “幽灵 3” 图 层 ， 可 以 看 到 
图 层 的 位 置 ， 如 图 6.28 所 示 。 



































图 6.28 


Step02 展开 该 图 层 ， 在 “变换 ”属性 中 找到 “缩放 ”属性 ， 也 可 以 按 快捷 键 5， 
启 “ 缩 放 ” 属 性 ， 单 击 “ 缩 放 ” 前 的 码 表 图 标 对 缩放 进行 关键 帧 设置 ， 如 图 6.29 




































































Step03 为 小 幽灵 的 “缩放 ”设置 不 同 的 参数 值 ， 如 图 6.30 所 示 。 
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图 6.30 
Step04 仍旧 在 该 图 层 中 ， 在 “变换 ”属性 中 找到 “不 透明 度 ” 属 性 ， 也 可 以 按 
快捷 键 T， 开 启 “ 不 透明 度 ” 属 性 ， 单 击 “ 不 透明 度 ” 前 的 码 表 图 形 对 不 透明 度 进行 
关键 帧 设置 ， 如 图 6.31 所 示 。 
im 站 了. 4 
有， 
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选中 所 有 帧 ， 按 F9 键 ， 将 关键 帧 设置 为 缓 动 。 
3. 位 置 





























Step01 打开 素材 源 文件 “二 维 码 锚 点 .aep”, 展开 图 层 , 在 “变换 ”属性 中 找到 “位 




















置 ” 属 性 ， 也 可 以 按 快捷 键 P， 开 启 “ 位 置 ”属性 ， 按 下 “位 置 ”前 的 码 表 图 形 对 位 











置 进行 关键 帧 设置 ， 如 图 6.32 所 示 。 


3 罚 了 上 :7 












图 6.32 
Step02 调整 属性 后 面 的 X、Y 参数 就 可 以 制作 位 置 动画 ， 如 图 6.33 所 示 。 
司 转 TEA 




















FF 


图 6.33 
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4. 旋转 
Step01 展开 图 层 , 在 “变换 ”属性 中 找到 “旋转 ”属性 , 也 可 以 按 快捷 键 R, 开启 “ 旋 
转 ” 属 性 ， 单 击 “ 旋 转 ” 前 的 码 表 图 形 对 旋转 进行 关键 帧 设置 ， 如 图 6.34 所 示 。 
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Step02 数值 左 侧 X 代表 旋转 的 圈 数 ， 右 侧 代表 旋转 的 角度 ，360” 等 于 1 圈 ， 如 






































生 6.35 所 示 。 








图 6.35 
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6.1.3 ”常用 工具 栏 及 摄像 机 功能 
本 节 将 讲解 AE 中 常用 的 工具 栏 及 摄像 机 功能 。 
1. 常用 工具 栏 
本 小 节 将 对 AE 软件 中 常用 的 工具 进行 讲解 。 
圆 “选取 工具 ” 
工具 栏 第 一 个 工具 为 “选取 工具 ”， 人 快捷 键 为 V， 如 图 6.36 所 示 。 





















































| 





















































图 6.36 


使 用 国 “ 选 取 工具 ”可 选择 图 层 、 形 状 ， 对 图 层 进行 移动 ， 如 图 6.37 所 示 。 












































圆 “ 手 形 工具 ” 
图 “ 手 形 工具 ”， 快捷 键 为 H (或 按 鼠 标 中 键 ) ， 可 对 合成 预览 器 画面 进行 移动 ， 
方便 查看 ， 如 图 6.38 所 示 。 
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9 国 “ 纺 放 工 具 " 
国 “ 缩 放 工具 ”, 快捷 键 为 Z, 或 鼠标 中 键 滚 轮滑 动 进 























行 放大 缩小 , 如 图 6.39 所 示 。 














图 6.39 
国 “ 旋 转 工具 ” 
图 “旋转 工具 ”， 快 捷 键 为 W， 可 对 图 











层 进行 旋转 ， 如 图 6.40 所 示 。 

















国 “ 向 后 平移 锚 点 工具 ” 
图 “向 后 平移 锚 点 工具 ”, 快捷 键 为 Y， 可 对 锚 点 位 置 进行 改变 ， 如 图 6.41 所 示 ， 
锚 点 位 置 由 画面 的 正中 间 移 动 到 了 储存 卡 的 中 心 位 置 。 

































































图 6.41 
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和 图“ 形状 工具 ” 
单 击 国 “形状 工具 ”可 展开 其 下 拉 列 表 ， 其 中 提 人 f 
了 一 些 形状 绘制 工具 ， 如 图 6.42 所 示 ， 可 以 创建 各 种 形 
状 图 层 ， 如 图 6.43 所 示 。 




























































































图 6.42 








图 6.43 

Step01 绘制 一 个 白色 矩形， 展开 其 “变换 : 矩形 1”， 在 “位 置 ”属性 上 右 击 ， 
在 弹出 的 快捷 菜单 中 选择 “ 重 置 ” 命 令 ， 对 甜 形 进行 重 置 ， 和 矩形 就 会 回 到 初始 位 置 ， 
如 图 6.44 和 图 6.45 所 示 。 
































9 
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图 6.45 


Step02 可 调整 “大 小 ”属性 ， 对 其 宽 高 进行 设置 ， 如 图 6.46 所 示 。 
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Step03 可 设置 其 “ 圆 度 ” 属 性 ， 调 整 矩 形 


[30 
一] 
入 | 


























6.47 所 示 。 





图 6.47 


Step04 设置 “ 描 边 宽度 ”属性 ， 可 对 甜 形 进行 描 边 ， 
可 以 设置 描 边 的 样式 ， 如 图 6.48 所 示 。 


调整 端点 类 型 的 下 拉 列 表 
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Step05 使 用 “填充 ”中 的 “颜色 ”可 以 对 矩形 进行 颜色 填充 ， 如 图 6.49 所 示 。 




















Step07“ 比 例 ” 可 以 设置 矩形 的 


图 6.50 


尺寸 大 小 ， 如 








Step08 “倾斜 ”可 以 设置 矩形 的 斜 切 角度 ， 如 
Step09 “旋转 ”可 以 设置 矩形 的 旋转 角度 ， 如 
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6.51 所 示 。 





网 网 


6.52 所 示 。 




















6.53 所 示 。 
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D 加 “钢笔 工具 " 


单 击 田 “ 钢 笔 工 具 ”， 其 下 拉 列 表 中 提供 了 各 种 钢笔 绘制 工具 ， 快 捷 键 为 G， 
如 图 6.54 所 示 。 












































选中 所 有 路 径 ， 按 快捷 键 Crl+T， 可 对 整个 路 径 进 行 旋转 缩放 ， 如 图 6.55 所 示 。 














圈 “ 添 加 顶点 工具 ”， 可 在 路 径 上 添加 顶点 ， 如 图 6.56 所 示 。 
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辆 “型 除 项 点 工具 ”可 删除 项 点， 如 图 6.57 所 示 。 















国 “ 转 换 顶 点 工具 ”可 对 顶点 添加 控制 手柄 ， 如 图 6.58 所 示 。 








“文字 工具 ” 
可 以 添加 文字 ， 包 括 “ 横 排 文字 工具 ”和 “ 直 排 文字 工具 ”， 如 图 6.59 所 示 。 
添加 完 的 效果 图 如 图 6.60 所 示 。 
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2. 摄像 机 功能 


图 6.60 














Step01 使 











工具 栏 中 国 “ 形 状 工具 ”中 的 工具 ， 绘 制 











个 星星 的 形状 图 


层 ， 如 











图 6.61 所 示 。 








个 区 





形 、 一 个 方形 、 











图 6.61 








Step02 在 图 
如 图 6.62 所 示 。 
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刁 面 板 





区 域 右 击 ， 








涛 整 加 屋 (A) 
Adobe Photoshop 文件 (H).… 
MAXON CINEMA 4D 文件 (C) 


在 弹出 的 快捷 菜单 中 选择 “新 于 





E> 摄像 机 ”命令 ， 
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Step03 在 弹出 的 “摄像 机 设置 ”面板 中 可 以 选择 摄像 机 的 参数 ， 如 图 6.63 所 示 。 





























图 6.63 


Step04 在 合成 预览 器 右 下 方 可 选择 视图 布 








局 ， 如 图 6.64 所 示 。 





6.64 








Step05 选择 “2 个 视图 - 水 平 ” 可 从 项 视图 中 观察 图 层 的 位 置 ， 如 图 6.65 所 示 。 
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Step06 将 三 个 图 层 的 Z 轴 位 置 进行 调整 ， 如 图 6.66 所 示 。 




















6.66 


Step07 单 击 国 “ 摄 像 机 工具 ”展开 其 下 拉 列 表 ， 选 择 “ 轨 道 摄像 机 工具 ”， 可 
以 看 到 摄像 机 的 运动 方向 ， 如 图 6.67 所 示 。 





















































6.67 


Step08 选择 图“ 跟踪 Z 摄像 机 工具 ”, 可 以 在 Z 轴 上 跟踪 摄影 机 的 运动 , 如 图 6.68 
所 示 。 








092 


第 6 章 AE 基础 及 MG 动 效 


全 提示 
“跟踪 7 摄像 机 工具 ”快捷 键 为 所 标 中 键 ; 
“轨道 摄像 机 工具 ”快捷 键 为 鼠标 堪 键 ; “ 跟 
踪 Z 摄像 机 工具 ”快捷 键 为 筷 标 右键 ; 快捷 键 
C 可 切换 摄像 机 工具 。 


6.1.4 ”GIF 生成 


本 小 节 将 讲解 如 何在 PS 和 Ulead GIF 动 
画 软件 中 生成 GIF。 
1. PS 生成 GIF 
Step01 在 PS 中 ， 选 择 “ 窗 口 > 时 间 轴 ” 
命令 添加 时 间 轴 ， 如 图 6.69 所 示 。 
Step02 可 看 到 出 现 的 时 间 轴 窗口 ， 如 图 6.70 所 示 。 


6.70 


Step03 在 时 间 轴 窗口 中 ， 单 击 中 间 胶 卷 标 志 小 图 标 右 侧 的 三 角 按钮 ， 可 以 添加 
媒体 ， 包 括 可 添加 序列 、 视 频 等 ， 如 图 6.71 所 示 。 













































































图 6.71 


Step04 单 击 “ 添 加 媒体 ”按钮 ， 在 文件 夹 中 选择 序列 ， 如 图 6.72 所 示 。 


ET 
全 
5 
人 
+ 


胃 图 国 国 国 
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Step05 导入 的 序列 如 


Ea| 











6.73 所 示 。 

















6.73 
Step06 在 左下 角 可 以 看 到 有 3 个 小 方 框 组 成 的 按钮 ， 
列 转换 成 帧 ， 如 图 6.74 所 示 。 


hf 击 该 按钮 ， 就 可 以 将 序 




















Step08 选择 “文件 > 存储 为 Web 所 用 格式 ”命令 ， 





6.76 所 示 。 
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6.74 


Step07 单 击 帧 下 方 的 小 三 角 按 钮 ， 在 弹出 的 菜单 中 可 以 对 帧 改变 延迟 ， 如 图 6.75 


6.75 


新 建 (N)… 


Ctrl+N 
打开 (O).. Cul+O 
在 Bridge 中 浏览 (8).… Ak+Ctrl+O 
打开 为 .… Alt+Shift+Ctrl+O 
打开 为 智能 对 象 . 

最 近 打 开 文件 (T) 

关闭 (O Ctrl+W 
关闭 全 部 Al+Ctd+W 
关闭 并 转 到 Bridge. Shift+Ctrl+W 
存储 (S) Ctrl+S 


Shift+Ctrl+S 


恢复 (V) 


图 6.76 





快捷 键 为 Alt+Shift+Ctrl+S， 
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Step09 在 弹出 的 窗口 

















Ph 可 更 改 仿 色 、 图 像 大 小 、 循环 选项 等 参数 , 如 图 6.77 所 示 。 





| EE FT RR 











图 入 大 小 


TY ia 他 ik: 0 
1 2 J a i 








Sa 
J0m 各 各 a mge -三 
日 I:- «= 


@ 罩 











二 
全 过 而 “一 次 











图 6.77 
Step10 单 击 “ 保 存 ” 按 钮 ， 如 图 6.78 所 示 。 





EE 




















2. Ulead GIF 动画 软件 生成 GIF 
Step01 打开 软件 会 弹 ! 











如 图 














tH 启动 向 导 ， 选 择 创建 一 个 GIF 动画 方案 
6.79 所 示 。 





ph 的 动画 向 导 ， 
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全 Ueed StF 3 本- ES [D9 tooao 


a 
次 亲 _ 交 生理 丰 _ 昌 间 儿 于 下 本 1 得 生 
口算 ~ 加 | 十 下 | 攻 ” | 一- 丰 生 | 国 国友 机 | 和 后 生 | 崔 
I be 
1 1 了 蕊 河 办 站 国 图 田 内 | 厂 Wsinie 








厂 下 一 次 不 显示 这 个 对 笑 种 











和 mW MWL p 放 | 本 辐 交心 村 | 玉 | 国 
全 用 要 天 控 FL 








健一 个 GIF 动画 方案 


总 gs 


6.79 




















Step02 在 弹出 的 “动画 向 导 - 设置 画布 尺寸 ”窗口 中 调整 像素 尺寸 ， 如 图 6.80 
所 示 。 


Step03 导入 序列 ， 如 图 6.81 所 示 。 



































人 
尺寸 =] 由 坦 
高 度 : 6600。 滞 可 
FSm | 取消 
图 6.80 图 6.81 
上 #“ 移 除 ” 按 钮 ， 可 以 将 不 需要 的 序列 删除 ， 如 图 6.82 所 示 。 
Step05 单 击 “下 一 步 ”按钮 ， 可 以 调整 帧 速率 ， 如 图 6.83 所 示 。 
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你 希望 每 个 副 面 册 叶 示 久 ? 
en 
om 本 


迁 jB3 间 性 iopth 种 ) 
技 机 此 京 指定 吊 每 一 秒 ) 








3 


演示 


























《上 一 步 四 | 下 一 步 听 > 职 消 《上 一 步 9)| 下 一 步 吧 > 取消 
6.82 6.83 

Step06 单 击 “ 完 成 ”按钮 ， 如 图 6.84 所 示 。 

Step07 可 在 “编辑 ”菜单 中 选择 “修整 画布 ”命令 修整 画布 ， 如 图 6.85 所 示 。 





苗子 GIF 动 加 现在 已 经 收集 了 足够 63 信息 语 并 您 8 动 
a ne 
Md 下 


点 击 “ 充 成" 技 扫 处 理 人 Si 面 


< 上 -mE 到 少 
图 6.84 


Step08 在 “文件 ”菜单 中 选择 “另存 
行 存储 ， 如 图 6.86 


»》 全 人 : 


为 >GIF 文件 



















































































RS eR 
所 示 。 mae 图 田 田 是 | "west 
Ss 11 
加 RE ColyS Sa 
一 区 二 jos Uo2R- 
@@ 6.2 MG 小 动画 | 名 区 
op 12 个 小 案例 来 讲解 常见 的 2 
MG 小 动画 制作 。 6.86 
6.2.1 海豚 动态 二 维 码 
本 小 节 将 通过 一 个 海豚 动态 二 维 码 的 案例 ， 来 讲解 遮 罩 的 使 用 ， 其 中 包括 简 
遮 曾 和 不 规则 的 遮 罩 。 
1. 简单 遮 淖 
Step01 打开 素材 源 文件 “万 圣 节 glow.aep”， 当 前 场景 中 是 一 个 万 圣 节 动 态 二 
维 码 效果 ， 选 择 “巫婆 路 径 2” 图 层 ， 单 击 码 表 按 钥 ， 对 巫婆 路 径 图 层 的 “位 置 ” 属 
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性 进行 位 移动 画 的 关键 由 设置 ， 如 图 6.87 所 示 。 


























图 6.87 


[ 具 ” 绘 制 出 一 个 与 紫色 方块 背景 一 致 的 形状 ， 如 




















层 6” 移 至 6 本 


图 6.88 





F 小 路 径 2” 





攻 | 
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Step04 在 “图 层 名 称 ” 或 “ 源 名 称 ” 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “ 列 数 > 
模式 ”命令 ， 打 开 TrkMat 遮 罩 面 板 ， 如 图 6.90 所 示 。 

Step05 在 “巫婆 路 径 2” 图 层 右 侧 的 TtkMat 栏 中 单 击 “ 无 ”旁边 的 三 角 按钮 ， 
在 弹出 的 菜单 中 选择 [Alpha 席 曾 “形状 图 层 6”] ， 如 图 6.91 所 示 。 































































































© ”没有 轨道 造 军 


Alpha 这 埋 “形状 图 层 6” 
Alpha 反 转 下 于 “ 6° 
吏 变 加 军 “ 形 状 图 层 6” 

于 度 乓 转 带 军 “形状 图 层 6 








一 
一 


图 6.90 6.91 














Step06 这 样 ， 巫 婆 就 只 在 “形状 图 层 6” 这 个 正方 形 的 区 域 里 移动 了 ， 如 图 6.92 








所 示 。 





图 6.92 
2. 不 规则 谈 罩 一 一 海豚 
Step01 打开 素材 源 文 件 “ 小 车 二 维 码 遮 罩 .aep”， 当 前 场景 是 一 个 海滩 城市 动 
态 二 维 码 ， 选 中 “海豚 02” 图 层 复制 出 “海豚 03 ”， 如 图 6.93 和 图 6.94 所 示 。 















































图 6.93 
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图 6.94 






































Step02 在 “海豚 03 ”图 层 右 侧 的 “轨道 遮 罩 ” 栏 下 单 击 三 角 按 钮 ， 在 弹出 的 菜 






































6.95 


单 中 选择 “没有 轨道 遮 曾 ”取消 遮 罩 ， 取 消 遮 罩 后 显示 为 “无 ”， 如 图 6.95 所 示 。 











Step03 给 “海豚 03 ”图 层 的 “位 置 ”设置 3 个 关键 帧 动画 ， 如 





6.96 





图 








6.96 所 示 。 


Step04 对 “海豚 03” 的 “旋转 ”设置 3 个 关键 帧 ， 使 海豚 的 脑袋 朝向 跟着 跳跃 

















的 曲线 ， 如 图 6.97 和 图 6.98 所 示 。 


























图 6.97 











Step05 复制 “图 层 0”( 也 就 是 没有 海豚 的 背景 
将 复制 出 的 “图 层 4” 移 至 “海豚 03” 的 上 方 ， 如 






































层 ) ， 复制 出 来 的 








受 | 
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6.99 所 示 。 











层 为 “ 





稳 











层 4”， 
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6.98 


站 
性 #3 
LE 


略 四 Ee 
性 口 性 Fo> 





图 6.99 














Step06 使 用 国 “ 钢 笔 工 具 ” 在 “图 层 4” 上 绘制 上 
































图 6.100 
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Step07 在 “海豚 03 > 图 层 后 面 选择 [Alpha 反 转 遮 罩 “ 图 层 4 ] ,如 图 6.101 所 示 。 





图 6.101 



































Step08 遮 罩 效 果 如 图 6.102 所 示 ， 可 以 看 到 有 遮 罩 的 地 方 海豚 被 盖 住 了 。 


Step09 在 钢笔 工具 中 选择 图 “添加 项 点 工具 ”， 
区 域 ， 让 海豚 在 掉 落 水 面 的 时 候 也 被 庶 


扩大 遮 罩 的 








图 6.102 









































遮挡 ， 如 


到 6 








.103 所 示 。 








这 样 ， 海 豚 在 海中 跳跃 的 遮 罩 动画 就 做 完了 。 图 6.403 





加 
6.2.2 ” 微 信 图 标 修剪 动画 
本 小 节 将 制作 一 个 微 信 图 标的 修剪 


测 








动画 ， 案 例 最 终 效果 如 图 6.104 所 示 。 


素材 源 文 件 “ 修 剪 路 径 - ES 
-<weixia> 图 层 , 单 击 < 添 甩 可 有 本 
安 钮 ， 在 弹出 的 菜单 中 选 


Step01 打 
初始 .aep”, 展 玫 
加 ” 旁 的 三 

































































择 “ 修 前 路径 ”命令 ， 如 图 6.105 所 示 。 
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图 6.104 











中 学 器 


国 旬 
人 
理 转 
生动 洲 径 
牌 动 过 的 
Zz 字形 
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Step02 打开 “修剪 路 径 ” 属 性 ， 为 “开始 ”“ 结 束 ”“ 偏 移 ” 分 别 设置 关键 帧 ， 
如 图 6.106 所 示 。 

















图 6.106 














Step03 做 一 小 段 路 径 从 开始 到 中 间 的 动画 ， 如 图 6.107 所 示 。 











图 6.107 














Step04 接着 做 一 段 路 径 长 满 后 半 圈 的 动画 ， 如 图 6.108 所 示 。 

Step05 这 样 ， 第 一 个 路 径 剪 切 的 动画 就 做 完了 ， 可 以 看 到 一 个 小 点 窜 了 半 圈 后 ， 
画 了 半 个 圈 ， 然 后 结尾 收缩 到 终点 。 
Step06 复制 出 一 个 “weixin” 图 层 得 到 “weixin2”， 如 图 6.109 所 示 。 
Step07 同样 , 在 “weixin2” 图 层 上 的 “修剪 路 径 ” 属性 中 , 为 “结束 ”设置 关键 帧 ， 
制作 出 接着 第 一 个 半 圈 走 完 全 程 的 路 径 动画 ， 如 图 6.110 所 示 。 
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图 6.110 
Step08 为 “ 圈 1/2/3 ”分 别 设置 “缩放 ”和 “不 透明 度 ” 的 关键 帧 ， 并 选择 关键 帧 ， 


右 击 ， 在 弹出 的 快捷 菜单 中 选择 “关键 帧 辅助 > 缓 动 ” 命 令 ， 将 关键 帧 设置 为 缓 动 ， 
并 调整 曲线 ， 如 图 6.111 所 示 。 



























































图 6.111 
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Step09 圆 点 的 3 个 “不 透明 度 ” 关 键 帧 分 别 从 0 一 100 一 0,“ 缩 放 ” 也 是 
0 一 100 一 0, 制作 出 从 小 到 大 再 缩小 , 从 无 到 有 再 消失 的 动画 效果 ,如 图 6.112 所 示 。 






























































图 6.112 


Step10 设置 好 后 ， 错 开 三 个 点 的 时 间 ， 就 制作 出 三 个 圆 点 分 别 出 现 后 消失 的 前 
la 动画 ， 如 图 6.113 所 示 。 
































my 








图 6.113 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
6.2.3 水滴 融合 动画 


本 小 节 将 制作 一 个 水 滴 融 合 动画 ， 案 例 最 终 效果 如 图 6.114 所 示 。 
Step01 新 建 合 成 ， 背 景色 为 灰色 ， 如 图 6.115 所 示 。 


























图 6.114 图 6.115 

















Step02 使 用 国 “ 椭 圆 工具 ”绘制 一 个 圆 形 ， 如 图 6.116 所 示 。 
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图 6.116 





图 6.117 


Step04 绘制 紫色 的 小 圆 ， 如 图 6.118 所 示 。 





图 6.118 








Step05 按 Alt 键 ， 复 制 多 个 圆 并 改变 位 置 、 颜 色 和 大 小 ， 如 图 6.119 所 示 。 
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图 6.119 
Step06 选中 所 有 的 彩色 小 圆 , 按 P 键 调 出 “位 置 ” 属 性 , 为 “位 置 ” 属 性 添加 关键 帧 ， 
如 图 6.120 所 示 。 











图 6.120 
Step07 设置 小 圆 从 大 圆 内 部 向 外 移动 的 动画 ， 如 图 6.121 所 示 。 
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Step08 在 图 层面 板 
如 图 6.122 所 示 。 



































区 域 右 击 , 在 弹出 的 快捷 菜单 中 选择 “新 建 > 调整 图 层 











在 项 目 中 显示 合成 


各 


图 6.122 








Step09 把 调整 图 层 置 于 所 有 图 

















层 上 方 ， 如 图 6.123 所 示 。 














Step10 选择 “效果 > 模糊 和 锐 化 > 














图 6.123 











决 速 模糊 ”命令 ， 调 整 “模糊 度 ” 参 数 ， 如 

















图 6.124 所 示 。 
CC Cross Blur 

模拟 和 CC Radial Blur 
担 曲 b CC Radial Fast Blur 
生成 D CC Vector Blur 
时 间 "| 本 
实用 工具 ， 犯 化 于 版 
通道 ”方术 村 卫 
pa | 芋 合 模 知 

脂 对 模 柄 
栅 色 校正 ， 
-和 | 天 交 愉 由 红 
条 色 和 对 粒 ， 
这 到 四 

C7 

图 6.124 
Step11 选择 “效果 > 遮 单 > 简单 阻塞 工具 ”命令 ， 为 其 添加 简单 阻塞 庶 











调整 “阻塞 庶 晶 ”参数 ， 如 图 6.125 所 示 。 


3 上 


108 


mocha shape 
请 整 柔 和 让 军 


请 坚实 边 反 至 
篇 单 阴 罕 | 
到 至 阻 大 





前 单 阻塞 工具 





图 6.125 
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Step12 播放 动画 ， 效 果 如 图 6.126 所 示 。 





图 6.126 


Step13 调整 所 有 圆 的 时 间 轴 ， 让 圆 错落 有 致 地 分 别 向 外 扩散 ， 如 图 6.127 所 示 。 


+ VE 


5 * WW < 


+ A 
9 上 人 各 





图 6.127 


Step14 导入 素材 文件 “LOGO.png” 图 片 ， 如 图 6.128 所 示 。 

Step15 为 LOGO 添加 “效果 > 颜色 校正 > 色调 ”命令 ， 如 图 6.129 所 示 。 

Step16 将 * 黑 、 和 白色 映射 到 ?” 均 设置 为 白色 , 并 调整 图 片 的 “不 透明 度 ” 如 图 6.130 
所 示 。 

Step17 设置 LOGO 从 20% ~ 80% 的 “不 透明 度 ” 动 画 ， 并 同时 设置 其 缩放 动画 ， 
使 其 进行 “原始 大 小 一 放大 一 原始 大 小 ”的 动画 ， 如 图 6.131 所 示 。 
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本 perpedine ee 
rt a 

FEC Stylize ，| “二 要 | 

FEC Time | mmm | 

FEC Transitions ， 。 忆 军 en 

Knoll » et 

Red Giant ， 一 

Sapphire Adjust ， 折光 

Sapphire Blur+Sharpen » 全 两 的 化 

Sapphire Builder » 色光 

Sapphire Composite » ba 

Sapphire Distort » 全 阶 (地 独 控 件 ) 

Gormbdee iain » 色 蛋 / 蜀 生 袜 


图 6.129 
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图 6.131 





至 此 ,水滴 融合 的 LOGO 动画 就 完成 了 , 更 详细 的 操作 步骤 可 参见 随 书 教学 视频 。 


6.2.4 “小 球 组 字 
本 小 节 将 讲解 一 个 小 球 组 字 动 画 效 果 ， 案 例 最 终 效果 如 图 6.132 所 示 。 

















,图 i 
@ . ” @ © ， 人 2 
3 7 2 ~ Sa doe 

名 
图 6.132 


3》 全 从 


Step01 在 项 目 面板 中 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 合成 ”命令 ， 新 建 
一 个 合成 ， 在 弹出 的 “合成 设置 ”面板 中 ， 设 置 “ 合 成 名 称 ” 为 合成 3,，“ 宽 度 / 高 度 ” 
为 600 像素 ,“ 帧 速率 ”为 25 帧 / 秒 , “持续 时 间 ” 为 10 帧 , “背景 颜色 ”为 白色 ， 


如 图 6.133 所 示 。 
Step02 使 用 文字 工具 ， 在 窗口 中 输入 “UE” 字 符 ， 如 图 6.134 所 示 。 





















































































































































新 汗 Adobe Photoshop 文件 - 
建 MAXON CINEMA 4D 文件 


导入 


导入 最 近 的 素材 


图 6.133 图 6.134 


， 按 住 Shift 键 在 窗口 中 绘制 一 个 圆 形 ， 颜 色 填 充 为 玫 红 色 ， 

















加 



































Step03 使 用 椭圆 
如 图 6.135 所 示 。 
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Step04 





展开 绘制 好 的 圆 形 〈 形 状 图 





图 6.135 


层 1) ,点 选 椭圆 路 径 (椭圆 1) ， 按 住 Alt 键 ， 








拖 动 椭圆 路 径 ， 复 制 椭圆 路 径 到 其 他 位 置 ， 如 图 6.136 所 示 。 





Step05 























改 一 个 圆 球 的 颜色 为 米色 ， 并 复制 米色 














EU 








球 到 UE 字体 的 其 他 位 置 ， 


T 




















如 图 6.137 所 示 。 
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Step06 在 UE 字符 的 其 他 位 置 添加 粉红 色 的 小 球 ， 如 图 6.138 所 示 。 
图 6.137 加 6.138 





























Step07 单 击 “ 形 状 图 层 ” 的 “添加 ”按钮 的 箭头 图 标 ， 在 弹出 的 菜单 中 选择 “ 摆 
动 变换 ”命令 ， 如 图 6.139 所 示 。 























图 6.139 














Step08 展开 “摆动 变换 1”， 为 “时 间 相 位 ”“ 空 间 相 位 ”和 “变换 ”中 的 “位 
置 ” 和 “比例 ”进行 关键 帧 设置 。 

Step09 调整 第 一 个 关键 帧 ， 设 置 “时 间 相 位 ”为 0x+284”、“ 空 间 相 位 ”为 
1x+17”、“ 位 置 ” 参 数 为 177,148, “比例 ”为 448,448%， 如 图 6.140 所 示 ， 大 家 也 
可 以 尝试 一 些 别 的 参数 。 

Step10 第 二 个 关键 帧 ， 我 们 把 4 个 属性 的 参数 设置 全 部 归 0， 如 图 6.141 所 示 。 
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图 6.140 














Step11 为 了 让 小 球 在 组 成 字母 后 ， 有 一 点 缓 缓 的 拌 动 变化 ， 我 们 在 “位 置 ”属性 的 
后 面 册 设置 两 个 关键 帧 , 关键 帧 的 参数 为 3、-3、4、-4 等 比较 小 的 数值 ， 如 图 6.142 所 示 。 
































114 





使 

















第 6 章 AE 基础 及 MG 动 效 





图 6.142 





这 样 就 可 以 得 到 一 个 由 绚烂 的 小 球 粒子 组 成 的 字 1 





























别 的 颜色 和 字 


6.2.5” 蒙 版 水 波 





本 小 节 将 制作 一 个 蒙 版 水 波 的 动 效 效果 ， 案 例 最 终 效果 如 





斗 及 LOGO 和 图 形 来 举一反三 ， 制 f 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 


母 的 








动画 了 ， 大 家 还 可 以 尝试 
F 更 多 有 趣 的 动画 效果 。 
教学 视频 。 











Step01 在 AE 





图 6.143 





图 6.143 所 示 。 




















h 导 入 素材 文件 “mbsb.png”， 使 





椭圆 











并 填充 为 深蓝 色 ， 调 整 其 “不 透明 度 ” 为 20%， 命 名 为 “ 底 色 





[ 具 ， 绘 制 一 个 圆 形 ， 
”， 如 图 6.144 所 示 。 
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图 6.144 


Step02 使 用 钢笔 工具 绘制 一 块 波浪 形 的 面积 ， 并 填充 为 绿色 ,命名 为 “ 蒙 版 1”， 
可 以 借助 参考 线 进行 绘制 ， 如 图 6.145 所 示 。 


















































图 6.145 


Step03 选择 “ 蒙 版 1” 图 层 ， 按 P 键 调 出 “位 置 ” 属 性 ， 为 其 设置 一 个 从 右 向 























左 移动 的 关键 帧 动画 ， 如 图 6.146 所 示 。 

Step04 复制 一 层 “ 底 色 ” 为 “ 底 色 2”, 并 将 其 移 至 “ 蒙 版 1” 的 上 方 , 并 设置 “ 蒙 
版 1” 的 “轨道 庶 章 ”为 [Alpha 遮 罩 “ 底 色 2”] ， 效 果 如 图 6.147 所 示 。 

Step05 使 用 钢笔 工具 绘制 一 个 波浪 ， 使 其 与 “ 蒙 版 1” 波 浪 形状 错开 一 些 ， 并 
填充 深 绿色 ， 命 名 为 “ 蒙 版 2”， 如 图 6.148 所 示 。 

Step06 设置 “ 蒙 版 2” 的 “位 置 ” 动 画 ， 使 其 从 右 侧 位 移 至 左 侧 。 

Step07 复制 一 层 “ 底 色 ” 为 “ 底 色 3”, 将 其 移 至 “ 蒙 版 2” 的 上 方 , 并 设置 其 “ 轨 
道 庶 晶 ”为 [Alpha 遮羞“ 底 色 3”] 。 
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图 6.146 











图 6.147 图 6.148 
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Step08 在 水 波动 画 的 前 画 
所 示 。 























具 打 “77%” 字 样 ， 完 成 动画 制作 ， 如 图 6.149 














图 6.149 


至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 








6.2.6 ”鲤鱼 路 径 动画 


视 并 本 节 将 制作 一 个 鲤鱼 沿路 径 移动 的 动画 效果 ， 案 例 最 终 效 果 如 图 6.150 所 示 。 





图 6.150 

















Step01 在 AE 中 ， 导 入 素材 文件 “bj.png” 为 背景 图 片 ， 这 本 





好 的 文件 中 进行 制作 。 




















我 们 直接 在 一 个 做 





Step02 首先 在 AI 中 绘制 一 个 鱼 的 形状 ， 回 到 AE 中 用 钢笔 工具 画 一 个 形状 ， 然 
后 把 AI 中 绘制 的 鱼 形状 找 贝 到 AE 的 这 个 形状 图 层 上 覆盖 原 有 图 形 ， 并 调整 图 形 的 





























大 小 及 位 置 ， 如 图 6.151 所 示 。 


EF Ve en TH 


图 6.151 
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MG 动 效 


Step03 打开 鱼 的 形状 图 层 “ 形 状 图 层 1”， 然 后 找到 “路 径 1” 属 性 ， 为 路 径 设 




















置 一 个 关键 帧 ， 如 图 6.152 所 示 。 














图 6.152 








Step04 给 鱼 的 路 径 设置 第 二 个 关键 帧 ， 然 后 调整 鱼 的 造型 成 为 一 个 尾 
间 的 样子 ， 如 图 6.153 所 示 。 

















图 6.153 


Step05 给 鱼 的 路 径 设置 第 三 个 关键 帧 ， 然 后 调整 鱼 的 造型 成 为 一 个 尾 
侧 的 样子 ， 如 图 6.154 所 示 。 




















巴 摆 在 中 








书 摆 在 左 
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Step06 重 命 名 鱼 的 形状 图 层 为 “yu”， 如 图 6.155 所 示 。 








图 6.155 


Step07 接 下 来 复制 鱼 摆动 尾巴 的 4 个 关键 帧 ， 使 其 成 为 一 段 原 地 循环 动画 ， 
图 6.156 所 示 。 























图 6.156 














Step08 使 用 钢笔 了 























图 6.157 所 示 。 





图 6.157 








Step09 在 图 层面 板 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “新 建 > 空 对 象 ”命令 
并 将 空 对 象 移动 至 鱼 的 位 置 ， 如 图 6.158 所 示 。 

Step10 在 “yu” 图 层 的 右 侧 找到 “ 父 级 ”, 单 击 弹簧 图 标 将 其 拖 折 至 空 对 象 图 
作为 空 对 象 的 子 物体 ， 如 图 6.159 所 示 。 
























































审 
I 
































120 


第 6 章 AE 基础 及 MG 动 效 


文本 

纯色 (S)- 

灯光 (D- 

天 从 W(C-… 

宇 对 象 (N) 

形 

调 榨 樟 屋 (A) 

Adobe photoshop 文件 (H).- 
MAXON CINEMA 4D 文件 (O).. 




















Step11 找到 波浪 线路 径 图 层 “ 形 状 图 层 1”， 展 开 该 图 层 ， 找 到 “形状 1> 路 径 
1> 路 径 ” 属 性 ， 设 置 一 个 关键 帧 。 并 复制 这 个 关键 帧 ， 如 图 6.160 所 示 。 























图 6.160 























Step12 选择 空 对 象 层 , 按键 打开 其 位置 ”属性 , 为 位 置 属性 先 设 置 一 帧 关键 帧 ， 
然后 粘贴 刚刚 复制 的 路 径 关键 帧 ， 如 图 6.161 所 示 。 
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图 6.161 




















Step13 这 样 ， 鱼 就 沿 着 刚才 画 的 波浪 路 径 运动 了 ， 如 图 6.162 所 示 。 





Step14 按 Ctrl+Alt+O 快捷 键 调 出 “自动 方向 ”本 





























后 把 选项 改 为 “沿路 径 











定向 ”， 这 样 鱼 的 头 就 会 跟着 路 径 的 朝向 灵活 变换 





人 名 




















6.163 所 示 。 











Step15 在 “yu” 图 
命令 ， 如 图 6.164 所 示 。 
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图 6.163 


出 的 快捷 菜 




















县 样式 > 渐变 于 加 ” 














效 村 » 
关键 策 缚 助 
打开 效果 控件 
国语 
00014 
显示 表达 式 异 误 
图 6.164 
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受 











色 为 “ 红 黄 ”两 色 ， 如 











NE 


属性 , 如 图 6.166 所 示 。 








“外 发 








设 


人 儿 




















Step17 设置 “内 阴影 "的 “颜色 ”为 
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Step18 这 样 一 条 沿 着 路 径 游 动 的 鱼 就 做 好 了 ， 如 图 6.167 所 示 。 





图 6.167 


至 此 ， 本 案例 就 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
6.2.7 ”汉堡 走路 
视频 小 动 可 本 小 节 将 讲解 一 个 汉堡 走路 的 MG 动画 效果 ， 案 例 最 终 效果 如 图 6.168 所 示 。 


-一 
一 




















J 
| 7 
3 7 
图 6.168 
Step01 在 AE 中 导入 素材 文件 “汉堡 .psd”， 使 用 钢笔 工具 绘制 出 两 条 腿 ， 并 使 
国 [转换 “顶点 ”工具 ] 对 中 间 的 点 添加 手柄 , 为 腿 添 加 膝盖 ,并 分 别 命 名 为 “zuo” 
和 “you”， 这 里 我 们 打开 原始 文件 ， 可 以 对 照 参考 制作 ， 如 图 6.169 所 示 。 
Step02 调整 腿 的 描 边 像素 为 6， 如 图 6.170 所 示 。 
Step03 对 左 腿 和 右 腿 的 路 径 设置 关键 帧 动画 ， 如 图 6.171 所 示 。 
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回 5 贸 素 
图 6.169 图 6.170 图 6.171 


Step04 调整 右 腿 和 左 腿 的 弧度 ， 自 动 添加 路 径 关键 帧 ， 如 图 6.172 所 示 。 























图 6.172 


Step05 设置 左右 腿 的 路 径 动作 ， 第 22 帧 与 第 0 帧 路 径 动作 一 致 〈 循 环 ) ， 如 图 
6.173 所 示 。 





图 6.173 
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Step06 接 下 来 对 汉堡 脑袋 的 “位 置 ”属性 设置 关键 帧 ， 汉 堡 跟随 腿 的 运动 而 上 
下 运动 ， 如 图 6.174 所 示 。 

















图 6.174 


Step07 选中 汉堡 的 动画 关键 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “关键 帧 辅助 
> 缓 动 ” 命 令 ， 如 图 6.175 所 示 。 











图 6.175 


至 此 ， 本 案例 就 全 部 制作 完成 ， 更 详细 的 步骤 参见 随 书 教学 视频 。 








本 小 节 将 讲解 一 个 烟花 动 效 案 例 ， 主 要 学 习 的 知识 点 包括 “修剪 路 径 ”“ 蒙 版 
路 径 ” 及 中 继 器 的 使 用 ， 案 例 最 终 效 果 如 图 6.176 所 示 。 
































6.176 
1. 导入 素材 并 绘制 烟花 拖 尾 


Step01 在 AE 中 ， 导 入 素材 文件 “yanhua.png”。 
Step02 使 用 钢笔 工具 在 画面 中 绘制 一 条 直线 ， 调 整 位 置 ， 如 图 6.177 所 示 。 
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2. 利用 “修剪 路 径 ” 制 作 烟 花 上 升 效果 
Step01 展开 该 直线 图 层 ， 单 击 “ 添 加 ” 右 侧 的 小 箭头 ， 为 图 层 添加 “修剪 路 径 ”， 
如 图 6.178 所 示 。 
















































































图 6.178 


Step02 对 “修剪 路 径 ” 的 “开始 ”和 “结束 ”设置 关键 帧 , 使 线条 有 串 上 去 的 动画 ， 
如 图 6.179 所 示 。 











图 6.179 


Step03 在 第 20 帧 处 ， 为 “开始 ” 和“ 结束” 分别 设置 一 帧 关键 帧 ,“ 开 始 ” 和 “ 结 











束 ” 值 分 别 为 100% 和 0%， 如 图 6.180 所 示 。 
Step04 在 第 39 帧 处 , 设置 “开始 ”为 0, 设置 一 帧 关键 帧 , 做 出 烟花 轨迹 , 如 图 6.181 
所 示 。 
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图 6.180 





图 6.181 


3. 利用 “ 蒙 版 路 径 ” 制 作 烟 花 尾部 羽化 效果 


Step01 在 该 图 








屋 上 使 




















框 蒙 版 ， 如 图 6.182 所 示 。 











“ 拢 形 





具 ” 并 选择 “了 





[ 具 创 奸 








蒙 版 ”， 绘 制 4 
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Step02 把 方块 蒙 版 置 于 烟花 轨迹 尾部 , 调整 “ 蒙 版 羽化 ”和 “ 蒙 版 扩展 ”, 并 对 “ 蒙 
版 路 径 ” 进 行 位 置 上 的 关键 帧 设置 ， 在 第 20 帧 处 形状 如 图 6.183 所 示 。 





























图 6.183 


Step03 第 40 帧 形状 如 图 6.184 所 示 ， 使 蒙 版 的 顶部 跟随 烟花 轨迹 尾部 移动 ， 并 
选择 蒙 版 模式 为 “ 相 减 ”模式 。 





图 6.184 














Step04 将 描 边 的 “线段 端点 ” 选 为 “ 圆 头 端点 ”， 如 图 6.185 所 示 。 
Step05 将 该 图 层 重 命 名 为 “烟花 轨迹 ”， 如 图 6.186 所 示 。 


























i 3 
[85d812_.n_fw658.png] - 
图 6.185 图 6.186 
ye 
4. 利用 “中 继 器 ”制作 烟花 爆炸 效果 

















Step01 使 用 “矩形 工具 ”绘制 一 个 矩形 ， 并 重 置 其 定位 ， 如 图 6.187 所 示 。 
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图 6.187 


Step02 对 竹 形 的 “大 小 ”设置 关键 帧 ， 在 第 41 帧 处 ， “大 小 ”为 0， 设 置 一 帧 
关键 帧 ， 如 图 6.188 所 示 。 














ET 





图 6.188 


Step03 第 60 帧 处 ,“ 大 小 ”为 15， 设 置 一 帧 关键 幢 ， 如 图 6.189 所 示 。 





图 6.189 


Step04 第 80 帧 处 , “大 小 ”为 0, 设置 一 帧 关键 帧 , 制作 出 从 无 到 有 再 到 无 的 过 程 ， 























“位 置 ”设置 为 了 轴 ，0 ~-85 的 动画 效果 ， 如 图 6.190 所 示 。 
Step05 单 击 “ 添 加 ” 右 侧 的 小 箭头 ， 为 图 层 添 加 “中 继 器 ”， 如 图 6.191 所 示 。 
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图 6.190 





图 6.191 
Step06 将 “变换 : 中 继 器 1” 属 性 中 的 “位 置 ” 
设置 为 0， 如 图 6.192 所 示 。 
Step07 在 “变换 : 中 继 器 1” 中 设置 “旋转 ” 
为 30”， 如 图 6.193 所 示 。 





























图 6.193 
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Step08 “中 继 器 1” 中 的 “副本 ”设置 为 12， 效 果 如 图 6.194 所 示 ， 复 制 12 个 











图 6.194 


Step09 播放 ， 可 以 看 到 烟花 绽放 的 效果 ， 如 图 6.195 所 示 。 





图 6.195 


Step10 用 同 种 方法 创建 出 黄色 实心 的 烟花 ， 如 图 6.196 所 示 。 





























图 6.196 
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Stepll 再 制作 出 条 状 的 烟花 (注意 中 继 器 的 副本 数 和 旋转 的 角度 ) ， 如 图 6.197 



































图 6.197 


Step12 在 该 图 层 上 右 击 , 在 弹出 的 快捷 菜单 中 为 烟花 添加 “外 发 光 ” 的 图 层 样式 ， 
如 图 6.198 所 示 。 
Step13 发 光 效 果 如 图 6.199 所 示 。 









































呈 寺 要 汉 式 错误 


图 6.198 图 6.199 


Step14 选择 4 个 图 层 ， 按 快捷 键 Ctrl+Shift+C 进行 打包 预 合成 ， 如 图 6.200 所 示 。 





[ 








图 6.200 
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Step15 调整 时 间 轴 和 移动 烟花 位 置 ， 使 播放 的 时 间 不 同 ， 如 图 6.201 所 示 。 














图 6.201 
至 此 ， 一 个 烟花 效果 就 制作 完成 了 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
9 6.2.9 几何 变形 动画 
国光 
说 贞 4 动 呈 。。 本 小 节 将 制作 一 个 几何 体 跳跃 的 变形 动画 ， 案 例 最 终 效果 如 图 6.202 所 示 。 













Step01 在 AI 中 使 用 “椭圆 工具 ”， 按 Shift 键 绘制 一 个 圆 形 ， 如 图 6.203 所 示 。 
Step02 使 用 “ 圆 角 珑 形 工具 ”绘制 一 个 贺 角 和 矩形， 如 图 6.204 所 示 。 































































































图 6.203 图 6.204 
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全 提示 

在 绘制 时 ， 可 以 比 对 圆 形 进行 绘制 ， 这 样 可 以 使 绘制 的 图 形 大 小 相等 。 

Step03 选择 “ 星 形 工具 ”绘制 一 个 五 角 星 ， 在 画布 中 右 击 ， 在 弹出 的 “ 星 形 ” 
面板 中 调整 “半径 2” 为 60， 单 击 “ 确 定 ”按钮 ， 创 建 一 个 五 ， 如 图 6.205 所 示 。 
Step04 选择 “效果 > 风格 化 > 圆 角 ”命令 ， 在 弹出 的 “ 圆 角 ”面板 中 设置 “半径 ” 
为 15， 如 图 6.206 所 示 ， 使 五 角 星 有 一 些 圆 角 效果 。 






















































































































































































图 6.205 图 6.206 


Step05 选择 “对 象 > 扩展 外 观 ” 命 令 ， 扩 展 五 角 星 外 观 。 这 样 就 在 AI 中 绘制 
好 了 3 个 几何 形状 ， 下 面 需要 将 其 粘贴 至 AE 中 进行 动 效 的 制作 。 

Step06 在 AE 中 ， 按 快捷 键 CtrlHN 新 建 一 个 合成 ， 宽 和 高 分 别 为 500 像素 、400 
像素 ， 黑 色 背 景 ， 如 图 6.207 所 示 。 

Step07 用 钢笔 工具 创造 一 个 形状 图 层 , 在 AI 中 复制 绘制 的 圆 形 路 径 , 回 到 AE 中 ， 
保持 绘制 的 形状 图 层 为 选中 状态 ， 粘 贴 复制 的 圆 形 ， 即 可 替换 AE 里 用 钢笔 工具 绘制 
的 图 形 ， 如 图 6.208 所 示 。 
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图 6.207 6.208 
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角 和 矩形 和 五 角 星 都 复制 到 AE 中 , 如 图 6.209 














[20 



































Step08 使 用 相同 的 方法 , 把 AI 里 的 
所 示 。 








图 6.209 


Step09 首先 制作 圆 形 的 变形 动画 ， 选 中 
圆 形 所 有 的 点 ， 按 快捷 键 Ctrl+T 进行 自由 变 
形 ， 按 住 上 方 中 间 的 控制 点 ， 向 下 移动 将 圆 
形 压 扁 ,， 并 为 其 “路 径 ” 属 性 设置 一 帧 关键 帧 ， 
如 图 6.210 所 示 。 

Step10 在 第 15 帧 处 ， 将 圆 形 恢复 至 原始 图 6.210 
状态 ， 并 移 至 上 方 ， 再 次 设置 一 帧 关键 帧 ， 如 图 6.211 所 示 。 
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El 











Step11 在 第 5 帧 处 ， 把 圆 形 移 至 下 方 ， 设 置 一 帧 关键 帧 ， 如 图 6.212 所 示 。 





图 6.212 






































Step12 复制 第 三 个 关键 帧 到 第 18 帧 的 位 置 上 ， 使 圆 形 依旧 在 上 面 ， 如 图 6.213 
所 示 。 








图 6.213 


Step13 在 第 24 帧 处 ， 复 制 第 5 帧 ， 使 其 相同 ， 如 图 6.214 所 示 。 在 圆 接触 地 画 
的 后 一 帧 ， 换 成 圆 角 和 矩形， 下 面 首先 设置 圆 角 珑 形 的 弹跳 动画 。 




























































































图 6.214 




















Step14 选择 圆 角 矩形 图 层 ， 展 开 其 “路 径 ” 属 性 ， 按 快捷 键 Ctrl+T 将 圆 角 矩形 
顺 时 针 旋 转变 成 蓉 形 ， 并 为 “路 径 ” 属 性 设置 一 帧 关键 帧 ， 如 图 6.215 所 示 。 

Step15 在 第 15 帧 处 ， 将 六 形 再 旋转 为 圆 角 和 矩形， 设置 一 帧 关键 帧 ， 如 图 6.216 
所 示 。 
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图 6.215 
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图 6.216 


Step16 在 第 18 帧 处 ， 复 制 第 二 个 关键 帧 ， 使 其 相同 。 
Step17 在 第 24 帧 处 ， 使 其 回 到 第 1 帧 的 位 置 ， 如 图 6.217 所 示 。 
































wee ns we 


日 BOe@ 


| 
ss 
Lemon 
FE 





138 


第 6 章 AE 基础 及 MG 动 效 








可 
下 

















和 矩 形 的 时 间 线 移 至 圆 形 的 结束 位 置 ， 如 图 6.218 所 示 。 


Step18 将 区 











图 6.218 


Step19 选择 圆 形 时 间 线 ， 保 持 时间 线 在 其 动画 结束 位 置 ， 按 快捷 键 Alt+] 可 以 
把 素材 的 后 半 段 前 掉 ， 素 材 就 不 会 出 现在 后 面 的 时 间 轴 上 了 ， 如 图 6.219 所 示 。 












































图 6.219 
Step20 同样 ， 制 作出 星 形 的 弹跳 动画 。 


Step21 调整 圆 形 的 颜色 为 红色 ， 并 为 其 添加 外 发 光 效 果 ， 并 设置 外 发 光 的 颜色 
及 属性 ， 如 图 6.220 所 示 。 
































关 肆 关 瑚 且 
打开 交 旦 控件 


时 示 委 达 式 错误 










































































Step22 用 同样 的 方法 修改 圆 角 和 矩形 为 蓝 色 ,五 角 星 为 黄色 ， 并 添加 发 光 效 果 ， 
如 图 6.221 所 示 。 
Step23 将 所 有 关键 帧 设置 为 缓 动 。 
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图 6.221 








至 此 ， 本 案例 就 全 部 制作 完成 了 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
6.2.10 边 角 定 位 
本 小 节 通 过 一 个 小 案例 ， 来 讲解 如 何 边 角 定位 ， 效 果 如 图 6.222 所 示 。 
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图 6.222 














Step01 打开 源 文件 “ 边 角 定 位 - 初始 .aep”， 导 入 素材 文件 “57833bff2336c_1024. 
jpg” 作 为 展示 手机 样机 ， 如 图 6.223 所 示 。 























筷 aoorcavp (C: ~ 


SIN 57633bfD336c 1024 


图 6.223 


Step02 将 项 目 面板 中 的 “ 预 合成 3” 拖 到 时 间 线 上 ， 如 图 6.224 所 示 。 
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从 注意 
要 进行 边 角 定位 ， 需 要 将 制作 好 的 动画 进行 预 合成 ， 在 预 合成 时 需要 选择 “ 保 
留 所 有 属性 ”选项 ， 如 图 6.225 所 示 。 





图 6.225 


Step03 调整 “ 预 合 成 3” 的 “不 透明 度 ”， 如 图 6.226 所 示 。 

















图 6.226 


Step04 保持 “ 预 合成 3” 为 选中 状态 ， 选 择 “ 效 果 > 扭曲 > 边 角 定位 ”命令 ， 


















































如 图 6.227 所 示 。 
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Step05 按 Ctrl+R 快捷 键 添加 辅助 线 ， 拖 动 预 合 成 的 四 


图 6.228 所 示 。 
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CC Bend lt 
CC Bender 
CC Blobbylize 
CC Flo Motion 
CC Griddler 
CC Lens 
CC Page Turn 
CC Power Pin 
CC Ripple Pulse 
CC Slant 
CC Smear 
CC Split 
CC Split 2 
CC Tiler 
保守 细节 放大 
贝 塞 尔 曲 线 变形 
E 
变换 

6.227 

















角 定 位 到 了 








机 屏幕 上 ， 如 





Step06 调整 “ 预 合成 3” 的 “不 透明 度 ” 观 看 效果 ， 动 画 就 被 置 





如 图 6.229 所 示 。 











图 6.228 























机 屏幕 中 了 ， 
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6.229 


| 至 此 ， 本 案例 就 全 部 制作 完成 。 
:6.2.11 ”模糊 效果 
本 小 节 将 通过 一 个 小 案例 来 讲解 高 斯 模糊 的 应 用 效果 ， 案 例 效 果 如 图 6.230 









































Step01 打开 素材 源 文件 “高 斯 模糊 - 初始 .aep”， 选 中 背景 层 ， 选 择 “效果 > 
模糊 和 锐 化 > 高 斯 模糊 ”命令 ， 如 图 6.231 所 示 。 











CC Cross Blur 
模拟 b CC Radial Blur 
班 由 » CC Radial Fast Blur 
生成 CC Vector Blur 
相间 定向 模糊 
Se 0 鳄 化 京 版 
i 方 框 模糊 
法 : 复合 模糊 
| A 
杂 名 和 肢 袜 ， i 
pi ,| 人 二 模 机 

说 化 

过 像 机 弹头 模糊 

双向 模糊 

通道 模糊 

智能 模 梢 

图 6.230 图 6.231 
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Step02 对 “高 


斯 模糊 ”的 “模糊 度 ” 设 置 关 键 帧 〈0 为 无 模糊 效果 ) ， 如 图 6.232 
所 示 。 





图 6.232 


Step03 在 不 同 的 时 间 设 置 不 同 的 模糊 值 , 并 选中 所 有 的 关键 帧 设置 为 缓 动 (F9) ， 
如 图 6.233 所 示 。 





















































图 6.233 
Step04 再 单 击 辆 “图 表 编辑 器 ”图 标 ， 打 开 曲 线 编辑 器 ， 对 曲线 进行 调整 ， 使 
其 更 有 节奏 ， 如 图 6.234 所 示 。 





至 此 ， 本 案例 全 部 制作 完成 。 
6.2.12 发 光 
本 小 节 将 通过 一 个 小 案例 来 讲解 发 光 效 果 的 制 人 


Step01 打开 素材 源 文件 “万 圣 节 glow- 初始 .aep” 
和 嘴巴 勾勒 出 来 ， 单 独创 建 一 个 形状 图 





TT 


























， 使 用 钢笔 工具 将 南瓜 的 眼睛 
层 ， 并 将 其 重 命名 为 “zuiba” 和 “yan”， 如 
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图 6.235 所 示 。 











图 6.235 
Step02 选中 眼睛 和 嘴巴 的 图 层 ， 选 择 “效果 > 风格 化 > 发 光 ” 命 令 ， 为 其 添加 
Step03 调整 “发 光 阅 值 ”以 及 “发 光 半 径 ”， 如 图 6.236 所 示 。 


























图 6.236 


Step04 对 “发 光 强 度 ” 设 置 关 键 帧 〈0 为 无 发 光 ) ， 这 里 使 用 的 设置 方式 是 
0,1.0,1……: ， 这 样 ， 南 瓜 眼睛 就 能 闪烁 发 光 了 ， 如 图 6.237 所 示 。 


























图 6.237 


至 此 ， 本 案例 全 部 制作 完成 。 
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人 i Hd Ty 交 生生 生生 和 仆人 生生 和 的 下 =- 


Ul 交互 动 效 必修 课 











本 章 将 通过 几 个 案例 来 讲解 一 些 酷 炫 插件 的 UI 动 效 及 APP 动 效 ， 包 括 以 下 10 








个 案例 。 

1. 酷 炫 插件 2. APP 动 效 

@ UEgood 风景 @ 3D 图 层 翻转 

@ 樱花 天 气 个 启动 页 动 效 

@ 宇宙 星空 @ 地 图 搜索 

@ 山川 天 气 @ 加 载 刷 新 
@ 播放 器 翻 页 
@@ 外 去 


@ 7.1 酷 炫 插件 


本 节 将 通过 4 个 案例 来 讲解 一 
些 酷 炫 插件 的 UI 动 效 ， 其 中 包括 
UEgood 风景 、 樱 花 天 气 、 宇 宙 星 空 及 


山川 天 气 。 
3 加 
7.1.1 UEgood 风景 


视频 小 动画 本 案例 的 讲解 对 象 是 一 个 风景 小 
动画 ， 这 类 小 动画 在 当下 是 比较 流行 
的 ， 可 以 用 作 一 些 APP 的 启动 页 ， 案 
例 最 终 效 果 如 图 7.1 所 示 。 
1. 导出 素材 
Step01 在 AI 中 绘制 风景 素材 及 
LOGO 文字 ， 如 图 7.2 所 示 。 
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图 7.2 〈 续 ) 


从 注意 
在 AI 中 绘制 素材 时 ， 一 定 要 注意 分 好 每 一 个 元 素 的 层 ， 这 样 可 方便 后 期 动画 的 
制作 。 


Step02 绘制 好 素材 后 ， 进 行 导出 ， 导 出 时 选择 PSD 格式 ， 并 勾 选 “使 用 画板 ”， 
击 “ 导 出 ”按钮 ， 如 图 7.3 所 示 。 

Step03 在 弹出 的 “Photoshop 导出 选项 ”面板 中 选择 “ 写 入 图 层 ”， 单 击 “ 确 定 ” 
按钮 ， 如 图 7.4 所 示 。 























Im 
远 







































































2. 场景 准备 
Step01 在 AE 中 导入 素材 文件 “uegood-01.aep”， 选 择 “ 导 入 为 ”为 “合成 - 保 











持 图 层 大 小 ”选项 ， 单 击 “ 导 入 ”按钮 ， 如 图 7.5 所 示 。 
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全 个 


再 Y 作 和 苦 7 宇 ，71 柜 4 安 汪 ，71.1 UEgood 册 呈 ， 素 时 ，uegocd-01 人 二 三 


季 aoorcwpec 
Ga Medintosh HO( 





人 提示 


使 用 “合成 -保持 图 层 大 小 ”可 以 将 psd 分 好 层 的 素材 在 导入 AE 时 ,依旧 保持 


Step02 导入 素材 文件 “UE-7.png” 和 “热气 球 .png”。 

Step03 将 导入 的 素材 都 拖 入 到 时 间 线 中 ， 将 “热气 球 ” 置 于 所 有 图 层 的 顶层 
并 将 其 稍微 旋转 一 些 , 将 LOGO 置 于 土地 下 方 , 房子 和 树 的 上 方 ， 并 适当 调整 其 位 置 ， 
如 图 7.6 所 示 。 















































Step04 这 里 导入 的 小 鸟 图 层 是 一 个 单独 的 图 片 ， 不 便于 制作 动画 ， 所 以 这 里 我 
们 可 以 回 到 AI 中 选择 小 乌 的 一 半 翅 膀 进行 复制 ， 在 AE 中 使 用 钢笔 工具 绘制 一 个 形 
状 图 层 并 粘贴 ， 这 样 就 可 以 将 小 鸟 翅膀 粘贴 进来 了 。 
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Step05 对 照 原始 的 小 鸟 层 , 对 粘贴 进来 的 小 鸟 翅膀 进行 大 小 的 调整 , 单 击 国 “ 拍 
后 平移 〈 锚 点 ) 工具 ”， 移 动 妨 膀 的 错 点 至 小 鸟 右 下 角 ， 如 图 7.7 所 示 。 

Step06 复制 翅膀 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “变换 > 水 平 翻 转 ” 命 令 ， 
这 样 就 制作 好 了 一 只 小 鸟 ， 如 图 7.8 所 示 。 

















2 


中 
图 7.7 


Step07 将 绘 


两 只 鸟 也 进行 预 合成 ， 间 





Step08 选择 “背景 ” 
以 选择 “效果 > 颜色 校 














可 以 在 时 间 线 上 右 击 ,， 在 弹 ! 


这 几 种 方法 都 可 以 改变 背景 


| 好 的 小 鸟 复制 
快捷 键 Ctrl+ShiftrC 对 其 进行 预 合成 ， 并 
分 别 命名 为 “ 岛 2”“ 岛 3”， 














的 颜色 。 


出 来 两 只 ， 选 择 “ 形 状 





层 ， 按 Ctrl+Shift+Y 快捷 键 可 
E> 色调 ”命令 对 其 背景 
的 快捷 


E 莱 疾 


图 7.8 





受 














县 ”“ 形 状 











将 其 命名 为 “ 鸟 1”， 


图 7.9 





颜色 进 


如 图 7.9 











以 对 其 颜 
行 调整 ， 





到 层 2”， 按 
同样 的 方法 将 另外 











所 示 。 











色 进 行 调整 ， 也 可 
司 7.10 所 示 。 也 











如 

















单 中 选择 “新 建 > 纯色 ”命令 , 新建 一 


不 旦 . 
个 背景 ， 
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图 710 
至 此 ， 场 景 就 制作 完成 了 ， 下 面 制作 动画 。 
3. 制作 动画 
Step01 制作 土地 的 动画 。 选择 “土地 长 ”和 “土地 短 ” 层 , 按 S 键 调 出 其 “缩放 ” 
属性 ， 取 消 土地 素材 的 “约束 比例 ”链接 锁 ， 这 样 就 可 以 单独 对 土地 的 长 或 宽 进 行 
调整 ， 在 第 5 帧 处 设置 一 帧 关键 帧 ， 如 图 7.11 所 示 。 



































图 7.11 


Step02 在 第 2 帧 处 ， 将 “缩放 ”的 无 轴 设 置 为 0， 设置 一 帧 关键 帧 ， 这 样 就 制 





作出 了 土地 伸展 的 动画 ， 如 图 7.12 所 示 。 

Step03 制作 山 的 动画 效果 。 选 择 “ 右 山 ”“ 左 山 ”“ 中 山 ” 图 层 ， 按 S 键 调 出 
“缩放 ”属性 ， 取 消 其 “约束 比例 ”链接 锁 ， 在 第 15 帧 处 为 其 设置 一 帧 关键 帧 ， 
在 第 4 帧 处 将 “缩放 ”的 了 轴 设 置 为 0， 再 次 设置 一 帧 关键 帧 ， 如 图 7.13 所 示 。 
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这 样 ， 就 制作 出 了 山 拢 起 来 的 动画 ， 为 了 使 动画 更 有 弹性 ， 下 面 继续 为 其 添加 
关键 帧 。 

Step01 在 第 8 帧 和 第 12 帧 处 ， 设 置 “ 缩 放 ” 的 了 轴 为 120, 分 别 设置 一 帧 关键 帧 ， 
如 图 7.14 所 示 ， 这 样 动画 就 会 有 一 个 反弹 效果 ， 会 更 有 趣 。 





























图 7.14 
Step02 制作 山顶 上 的 雪 的 动画 。 选 择 “ 左 山顶 ”“ 右 山顶 ”“ 中 山顶 ”， 按 了 
键 调 出 其 “位 置 ”属性 ， 在 第 15 帧 处 为 其 设置 一 帧 关键 帧 ， 第 12 帧 处 ， 将 雪 调 整 
到 离 山 项 一 段 距离 ， 设 置 一 帧 关键 帧 ;在 第 8 帧 处 ， 其 位 置 与 第 12 帧 相同 ， 设 置 一 
帧 关键 帧 ， 如 图 7.15 所 示 。 
Step03 将 时 间 线 移 至 第 8 帧 处 ， 按 快捷 键 Alt+ [将 雪 的 前 半 部 分 素材 切除 ， 并 
将 所 有 的 关键 帧 按 F9 键 转换 为 缓 动 ， 如 图 7.16 所 示 。 



































图 7.15 
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了 


EN ET 


al 









志雄 前卫 的 半 奉 铀 
还 守 芝 起头 饼 狼 


图 7.16 
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Step04 调整 几 个 山 及 山顶 的 时 间 线 ， 使 其 有 一 些 错 帧 效果 ， 这 样 动画 更 有 节奏 ， 
如 图 7.17 所 示 。 

















图 7.17 


Step05 使 用 钢笔 工具 在 山 项 雪 的 部 分 绘制 出 3 条 线 ， 进 行 描 边 和 取消 填充 ， 在 
描 边 中 选择 圆 头 端点 ， 并 将 其 重 命名 为 “ 闪 1”， 如 图 7.18 所 示 。 



































图 7.18 





Step06 选择 钢笔 工具 ， 在 上 方 工具 栏 选择 图 “工具 创建 蒙 版 ”， 在 3 个 坚 线 
处 创建 一 个 蒙 版 ， 并 设置 蒙 版 模式 为 “ 相 减 ”,“ 蒙 版 羽化 ”为 15 像素 ， 如 图 7.19 
所 示 。 
Step07 为 “ 蒙 版 路 径 ” 设 置 关键 帧 ， 做 出 坚 线 长 出 来 的 动画 ， 如 图 7.20 所 示 。 
Step08 制作 好 的 “ 闪 1” 再 复制 出 来 两 份 ， 并 分 别 对 齐 3 座 山 ， 如 图 7.21 所 示 。 
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7.20 
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了 2 
Step09 制作 LOGO 的 动画 。 选 择 “UE-7.png” 图 层 ， 按 S 键 调 出 其 “缩放 ”属性 ， 
取消 其 “约束 比例 ”链接 锁 , 并 为 其 “缩放 ”的 了 轴 设 置 关键 帧 , 数值 为 0 ~ 120 ~ 100， 
如 图 7.22 所 示 。 





























7.22 














Step10 制作 房子 动画 。 打 开房 子 的 圈 “3D 图 层 ”， 并 为 “XX 轴 旋 转 ” 设 置 关键 帧 ， 
第 5、8、10 帧 数值 分 别 为 99、-18、0， 如 图 7.23 所 示 ， 然 后 将 关键 帧 转换 为 组 动 关键 帧 。 
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从 注意 

需要 双击 “房子 ”图 层 ， 进 入 其 预 合成 ， 将 其 内 部 
的 所 有 元 素 都 打开 图 “3D 图 层 ”。 

Stepl1 双击 “ 树 ” 层 进入 其 预 合 成 ， 选 择 顶 部 的 
“bush” 层 ， 选 择 “ 效 果 > 扭曲 > 液化 ”命令 ， 选 择 第 
一 个 变形 工具 ， 如 图 7.24 所 示 。 
Step12 在 第 45 帧 处 ， 为 液化 中 的 “扭曲 网 格 ”设置 一 帧 关键 帧 ， 在 第 20 帧 处 ， 
使 用 笔 刷 在 树 上 进行 绘制 ， 使 村 有 一 个 随机 扭曲 的 效果 ， 并 以 此 向 后 设置 扭曲 关键 
帧 效果 ， 使 其 有 一 个 随机 扭曲 的 动画 效果 ， 如 图 7.25 所 示 。 









































图 7.24 






















































































725 

Step13 再 选择 “效果 > 过 渡 > 线 性 擦 除 ” 命 令 ， 为 其 添加 线性 擦 除 ， 设 置 “ 擦 
除 角度 ”为 180”， 并 在 第 20 帧 和 第 45 帧 处 分 别 设置 “过 渡 完 成 ”的 关键 帧 ， 数 值 
为 100 ~ 0， 如 图 7.26 所 示 。 
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Step14 使 用 同样 的 方法 制作 出 其 他 树 的 动画 效果 。 

Step15 制作 热气 球 的 动画 效果 。 选 择 “ 热 气球 ” 层 ， 按 S 键 调 出 其 “缩放 ” 属 
性 ， 在 第 5、8、10 帧 分 别 设置 关键 帧 ， 数 值 为 0 ~ 70 ~ 60， 按 了 键 调 出 其 “位 置 ” 
属性 ， 设 置 热气 球 从 右 下 角 移 至 左上 角 的 动画 ， 如 图 7.27 所 示 。 





















































Tar 


Step16 下 面 制作 小 船 的 动画 , 将 小 船 的 锚 点 的 位 置 移 至 船 的 下 方 , 如 图 7.28 所 示 。 





























7.28 


Step17 将 “红旗 、 右 帆 、 左 帆 ”3 个 图 层 父子 链接 到 “ 船 2” 上， 这 样 他 们 就 可 
以 跟随 “ 船 2” 的 移动 而 移动 了 〈 父 子 级 ) ， 如 图 7.29 所 示 。 




















朗 住 shi 以 将 图 层 至 你 絮 位 置 。 按 住 址 以 保持 子 项 变 搞 《 味 哮 》 





7.29 


Step18 为 小 船 的 “位 置 ” 和 “缩放 ”设置 关键 帧 ， 制 作出 伸展 出 来 并 向 左 侧 移 
动 的 动画 ， 如 图 7.30 所 示 。 
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7.30 




















Step19 制作 小 鸟 的 动画 。 双击“ 鸟 1 图 层 进入 其 预 合成 , 为 其 翅膀 分 别 设置 “ 旋 


转 ” 关 键 帧 ， 数 值 为 0” 一 12” 





环 动画 ， 如 图 7.31 所 示 。 

















Step20 对 “ 鸟 1” 预 合成 图 
在 飞 动 时 进行 移动 。 使 
Step21 制作 湖 画 

















图 7.31 























动画 。 选择 “湖面 上 >” “ 湖 中 ” “ 湖 下 ” 图 











转 ” 属 性 ,注意 锚 点 所 在 位 置 一 臻 居中, 为 “旋转 ”属性 设置 关键 帧 , 使 



































并 进行 错 帧 ， 使 其 有 节奏 感 ， 如 图 7.32 所 示 。 











层 ， 按 及 键 调 ! 











加 








旋转 一 圈 ， 


， 然 后 将 设置 好 的 关键 帧 向 后 进行 复制 ， 使 其 作 循 


层 设置 “位 置 ”和 “不 透明 度 ” 的 动画 ,使 其 从 无 到 有 ， 
同样 的 方法 ， 对 其 他 两 只 鸟 也 设置 动画 。 


上 其 “ 旋 
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Step22 根据 动画 的 先后 顺序 ， 修 剪 素材 持续 时 间 〈 快 捷 键 Alt+ [或 ] ， 设 置 素 
材 的 入 点 和 出 点 ) ， 如 图 7.33 所 示 。 




















图 7.33 








Step23 也 可 使 
7.34 所 示 。 
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下 

















7.34 


至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
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7.1.2 ”樱花 天 气 








本 小 节 将 制作 一 个 樱花 天 气 的 动画 效果 ， 案 例 最 终 效果 如 图 7.35 所 示 。 





图 7.35 
Step01 打开 素材 源 文件 “樱花 lu- 初始 .aep”， 将 所 有 层 先 隐藏 ， 选 择 “ 草 包 


01”“ 草 包 02”“ 草 03”“ 草 04” 层 ， 将 其 显示 ， 并 按 S 键 调 出 “缩放 ”属性 ， 为 
其 设置 关键 帧 , 数值 为 0 ~ 55.7 ~ 49.7, 制作 出 草 长 出 来 的 动画 效果 , 如 图 7.36 所 示 。 








图 7.36 


从 注意 

设置 缩放 动画 前 ， 将 各 个 “草包 ”的 轴 心 点 移 至 草包 下 方 。 

Step02 选择 湖水 “ 预 合成 1”， 为 “缩放 ”设置 关键 帧 ， 数 值 为 0 ~ 100， 制 作 
出 湖水 长 出 来 的 动画 ， 如 图 7.37 所 示 。 

Step03 打开 山 的 3D 图 层 ， 并 为 其 “ 巨 轴 旋 转 ” 设 置 关键 帧 ， 制 作 山 翻转 起 来 的 
动画 效果 ， 如 图 7.38 所 示 。 

Step04 选择 “树干 ” 层 ， 将 其 时 间 线 的 起 始 位 置 拖 动 到 山 翻 转 起 来 后 ， 对 树干 
添加 “效果 > 过 渡 > 线性 控 除 ”命令 ， 如 图 7.39 所 示 。 
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Particular Curl+AlR+Shift+E 过 时 CC Grid Wipe 
We ' ccimgeWipe 

Di cov 
CINEMA 4D » i | CC Light Wipe 
FEC Blur & Sharpen »| a "cc tine Sweep 
FEC Color Correction 加 | 本 "ccRadial scaleWipe 
FEC Distort | N° ccscale wpe 
FEC Edges |。 NIN "| 。 ccTuiaer 
FEC Image ， 3 "| ccwarpoMasic 
FEC Ughe » E53 
FEC paride | »| ue 
FEC Perspecive | me | ee 
FEC Siylize » a 
FEC Time » fi 上 入 从 
FEC Transitions » Bd 可 快 污 四 
Rs ; -| 
Red inne ， 

7.39 
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Step05 设置 “ 擦 除 角度 ”为 180”， 并 为 “过 渡 完 成 ”K 帧 (关键 帧 ) ， 如 图 7.40 
所 示 。 





























图 7.40 
Step06 制作 楼 花 动画 。 选 择 所 有 的 樱花 层 “ 大 1”“ 大 2”“ 半 1”“ 半 2” 
“ 粉 ”“ban3” 和 “ban4”, 将 时 间 线 移动 至 树干 动画 完成 后 的 位 置 , 按 快捷 键 Altt [将 
樱花 素材 的 前 半 段 切除 ， 如 图 7.41 所 示 。 














7.41 


Step07 为 所 有 樱花 设置 “缩放 ?的 关键 帧 , 使 其 从 无 放大 , 制作 出 樱花 开放 的 效果 ， 
如 图 7.42 所 示 。 











图 7.42 
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Step08 在 大 的 樱花 开 完 后 ， 同 样 为 剩余 的 小 的 白色 樱花 也 进行 “缩放 ”关键 帧 
设置 ， 如 图 7.43 所 示 。 












































图 7.43 


Step09 为 “太阳 ”设置 “缩放 ”关键 帧 ， 使 其 从 山 后 面 冒 出 来 ， 如 图 7.44 所 示 。 


e 太阳 = — 
1 


图 7.44 


Step10 使 用 同样 的 方法 为 最 右 侧 的 绿色 植物 进行 “ 基 轴 旋转 ”的 关键 帧 设置 ， 
使 其 翻转 起 来 。 

Step11 调整 樱花 开放 的 关键 帧 节奏 ， 使 其 错开 开放 ， 动 画 更 有 节奏 感 。 

至 此 ， 基 本 的 场景 动画 已 经 设置 完成 了 7， 下面 再 继续 添加 一 些小 细节 。 

Step01 双击 “ 预 合成 1” 进 入 合成 内 部 , 为 湖面 上 的 涟 游 设置 “路 径 ”的 伸缩 动画 ， 




















中 























































































使 其 有 水 波 荡 澜 的 效果 ， 如 图 7.45 所 示 。 
7.45 
Step02 为 云彩 设置 “位 置 ” 关 键 帧 ， 使 其 进行 左右 移动 的 动画 ， 如 图 7.46 所 示 。 
7.46 
Step03 为 小 鸟 设 置 动 画 ， 在 上 一 小 节 中 已 经 有 过 讲解 ， 这 里 不 再 元 述 ， 如 图 7.47 
所 示 。 
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7.47 

















下 面 制作 花瓣 球 落 效果 。 
Step01 将 花瓣 再 复制 出 来 两 个 ， 如 图 7.48 所 示 。 
































图 7.48 


Step02 设置 位 置 飘落 的 动画 ， 如 图 7.49 所 示 。 





图 7.49 























Step03 使 用 圆 角 扼 形 工具 画 一 个 圆 角 方形 遮 罩 ， 并 且 按 快捷 键 Ctrl+ShifttC 预 
合成 之 前 的 动画 ， 如 图 7.50 所 示 。 

Step04 在 预 合成 上 ， 选 择 其 “轨道 遮 晶 ” 为 [Alpha 反 转 席 晶 “形状 图 层 1”]， 
如 图 7.51 所 示 。 
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7.50 


Alpha 避雷 “形状 图 层 1” 
Alpha 反 忽 旭 军 “ 形 让 轩 屋 1” 
况 广 这 埋 “形状 男 层 1 

寺 度 反 转 到 军 “ 形 亿 图 层 1 





图 7.51 














Step05 新 建文 本 ， 调 整 位 置 ， 添 加 时 间 等 元 素 ， 如 图 7.52 所 示 。 











7.52 


至 此 ， 本 案例 就 全 部 制作 完成 了 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 











7.1.3 ”宇宙 星空 
各 顺 | 动 本 ”本 案例 将 讲解 一 个 宇宙 星空 的 插件 案例 ， 案 例 最 终 效果 如 图 7.53 所 示 。 
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Step0 





中 输入 名 称 | 
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图 7.53 








1 打开 素材 源 文件 “宇宙 i 录 - 初始 .aep”， 导 入 素材 文件 “地 球 贴图 jpg”， 
为 “地 球 贴图 ”图 层 添 加 “效果 >CC Sphere” 命 令 ， 














央 束 找到， 如 图 7.54 所 示 。 











也 可 以 在 “效果 和 预 设 ”面板 




















Step02 拖 动 “CC Sphere” 至 “地 球 贴 图 ”图 











出 





























如 图 7.55 所 示 。 





7.54 








就 会 变 成 球形 ， 设 置 其 “Radius (半径 ) ”和 “Light Height (4 


层 上 ， 即 可 为 其 
了 J 的 高 度 ) ”属性 ， 











添加 ， 此 时 地 球 贴 





图 7.55 


Step03 调整 “Rotation 和 WY/Z (XYZ 轴 旋 转 ) ”, 并 


帧 ， 制 作 








地 球 旋转 的 动画 效果 ， 如 


贸 











7.56 所 示 。 


对 “Rotation Y(Y 轴 旋转 ) ” 开 
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Step04 使 


Step05 


























钢笔 工具 绘制 一 条 路 径 ， 如 图 7.57 所 示 。 











展开 








“形状 图 




















层 1”， 在 “内 容 > 形 状 > 描 边 ”中 找到 “虚线 ”并 


右 侧 的 加 号 按钮 将 路 径 变 为 虚线 ， 如 图 7.58 所 示 。 




















Step06 调整 小 火箭 的 
属性 设置 关键 帧 ， 在 设置 关键 帧 时 ， 可 以 调整 火箭 的 运动 轨迹 〈 调 整 轨 迹 了 
使 运动 轨迹 与 路 径 轨迹 拟 合 ， 如 图 7.59 所 示 。 


图 7.58 

















度 ， 使 其 朝向 路 径 方向 ， 并 为 小 火箭 的 “位 置 ” 和 “旋转 ” 




















F 柄 ) ， 


Step07 对 “ 火 1” 和 “ 火 2” 的 “路 径 ” 设 置 关 键 帧 ， 调 整 火焰 的 路 径 点 ， 使 其 
形状 不 一 样 ， 然 后 复制 粘贴 多 个 火焰 路 径 关键 帧 ， 制 作 火焰 燃烧 的 循环 动画 ， 并 将 
关键 帧 设置 为 缓 动 关 键 帧 ， 如 图 7.60 所 示 。 
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7.59 





7.60 


Step08 绑 定 火焰 和 火箭 的 父子 级 ， 使 火焰 跟随 火箭 运动 ， 如 图 7.61 所 示 。 














° 





171 


UI 交互 动 效 必修 课 









































Step09 双击 “宇航 员 分 层 ” 进 入 其 预 合 成 ， 选 择 “ 左 腿 ” 图 层 ， 使 用 图“ 操 
控 点 工具 ”在 左 腿 上 单 击 添加 控制 点 ， 为 宇航 员 制 作 骨骼 ， 如 图 7.62 所 示 。 

Step10 在 “窗口 ”菜单 中 添加 Duik 插件 〈 需 要 先 安装 ) ， 在 Duik 面板 中 单 刘 
本 3 加 “骨骼 ”按钮 ， 如 图 7.63 所 示 。 





































































































过 




















7.62 图 7.63 
Step11 出 现 四 个 图 层 ， 分 别 对 其 重 命 名 ， 如 图 7.64 所 示 。 


Step12 为 除 “ 左 脚尖 ”之 外 的 三 层 设置 “旋转 ”关键 帧 ， 制 作出 踢 腿 动画 ， 如 
图 7.65 所 示 。 







































































图 7.65 
Step13 使 用 相同 的 方法 ， 依 次 对 另外 一 条 腿 和 两 只 脱 膊 添加 骨骼 并 K 帧 。 
下 面 制作 背景 中 的 星星 动画 。 
Step01 使 用 椭圆 工具 绘制 圆 形 ， 并 在 一 个 形状 图 形 中 复制 多 个 ， 如 图 7.66 所 示 。 












































图 7.66 
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Step02 为 星星 层 添 加 效果 “CC Star 
Burst” 可 以 得 到 字 空 漫 游 的 场景 动画 ， 
如 图 7.67 所 示 。 
下 面 制作 五 角 星 闪烁 效果 。 

Step01 使 用 “ 星 形 工具 ”绘制 五 角 星 ， 
复制 多 个 ， 分 布 好 位 置 ， 如 图 7.68 所 示 。 


















































































































































医 
Step02 单 击 “ 添 加 ” 旁 的 小 箭头 按钮 ,为 图 层 添加 “摆动 变换 ”， 如 图 7.69 所 示 。 


7.68 























图 


Step03 调整 “时 间 相 位 ”和 “空间 相位 ”， 并 对 “比例 ”进行 K 帧 ， 就 制作 出 
了 星星 闪烁 的 动画 ， 如 图 7.70 所 示 。 


7.69 
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至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
7.1.4 ”山川 天 气 








视频 4 动画 本 小 节 将 制作 一 个 山川 平原 的 天 气 插件 ， 案 例 最 终 效果 如 图 7.71 所 示 。 


二 | 





7.71 


Step01 打开 素材 源 文件 “ 阴 天 2- 初始 .aep”， 打 开 “ 紫 山 ” 和 “ 棕 山 ”的 3D 
图 层 小 方块 ， 如 图 7.72 所 示 。 








7.72 


Step02 在 山 的 “ 工 轴 旋转 ”设置 关键 帧 ,使 其 形成 翻 起 来 的 动画 ,如 图 7.73 所 示 。 





























Step03 选中 “草坪 ”和 “ 河 ” 层 ， 设 置 “ 缩 放 ” 关 键 帧 ， 如 图 7.74 所 示 。 
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7.73 





图 7.74 
这 样 ， 山 和 河 及 草坪 的 动画 就 制作 完成 了 。 


全 注意 


在 设置 山 和 河 及 草坪 的 动画 时 ， 注 意 要 将 其 轴 心 点 移动 到 对 象 下 方 。 




















Step04 同样 为 “房子 ”和 和 “和牛” 设置“X 轴 旋转 ”关键 巾 ， 使 其 在 山河 出 来 后 
翻转 起 来 。 

Step05 为 其 余 的 一 些 树 及 草 ， 也 同样 设置 “缩放 ”及 “XX 轴 旋转 ”的 动画 ， 方 
法 与 前 面 的 案例 类 似 ， 这 里 不 再 缆 述 。 

Step06 为 “ 船 ” 设 置 “ 式 轴 旋 转 ” 及 “位 置 ” 关 键 帧 ， 使 
向 后 移动 ， 并 为 “太阳 ” 作 缩 放 动 画 。 
Step07 选择 “热气 球 ” 层 ， 为 气球 添加 “位 置 ”属性 动画 ， 并 调整 运动 轨迹 曲线 ， 
从 厂 侧 画面 外 飘 进 画面 内 ， 并 将 关键 帧 设置 为 缓 动 ， 如 图 7.75 所 示 。 



































ul 


翻转 起 来 后 ， 并 向 前 、 










































































il 








使 
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图 7.75 











Step08 制作 完成 后 , 选择 所 有 图 层 , 按 快捷 键 Ctrl+Shift+C 进行 预 合成 , 如 图 7.76 


所 示 。 














图 7.76 

















和 矩 形 工具 ， 绘 制 一 个 和 矩形 ， 如 图 7.77 所 示 。 











Step09 使 





Step10 选 
罩 “ 形 状 图 层 1 





FE 


择 预 合成 的 “ 阴 天 多 云 ” 图 层 ， 将 其 轨道 庶 曙 模式 设置 为 [Alpha 庶 

















”] ， 如 图 7.78 所 示 。 














Stepll 使 





文本 工具 添加 界面 上 的 文字 ， 并 调整 文本 的 颜 

















如 图 7.79 所 示 。 
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大 小 、 字 体 等 ， 
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没有 轨 适 这 日 
Alpha 让 至 壹 基本 忆 1 


Alphe 反 转 党 军 “形状 图 层 1” 
实 襄 渤 到 “ 形 杖 图 屋 1” 
玩 度 反 转 这 罕 “形状 要 屋 1" 


* 国 册 WE 


口 呈 HS 





7.79 


至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 











@@ 7.2 APP 动 效 


本 节 将 通过 6 个 案例 来 讲解 APP 的 动 效 效果 ， 其 中 包括 3D 图 层 翻 转 、 启 动 页 
动 效 、 地 图 搜索 、 加 载 刷新 、 播 放 器 翻 页 、 外 卖 。 


7.2.1 3D 图 层 翻 转 
本 小 节 将 讲解 一 个 3D 图 层 翻 转 的 APP 界面 动 效 ， 最 终 效果 如 图 7.80 所 示 。 
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Step01 在 AE 中 导入 素材 文件 “app02.psd” 及 另外 3 张 图 片 素材 。 

何 注意 

在 导入 “app02.psd” 时 ， 设 置 “导入 ”为 “合成 -保持 图 层 大 小 ”。 

Step02 在 “app02” 中 ， 将 “Status Bar” 重 命名 为 “电量 ”， 并 双击 进入 “profile” 


合成 ， 修 改 项 部 两 层 的 名 称 ， 并 将 “profile” 合 成 中 的 所 有 层 剪 切 到 “app02” 中 ， 
如 图 7.81 所 示 。 











-coser, 韩国 首尔 了 


TTT TT ET 


人 
/ 
人 
pd 
/ 
/ 





7.81 


Step03 将 图 7.82 中 选中 的 层 进行 预 合成 。 
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“i 





图 7.82 


Step04 将 模特 图 片 素材 拖 入 时 间 线 中 ， 并 调整 其 大 小 ， 如 图 7.83 所 示 。 








图 7.83 


Step05 拖 入 背景 图 片 ， 并 将 原始 的 背景 (“Color Fill 1”“Background”) 删除 ， 
将 风景 图 片 也 拖 入 时 间 线 ， 如 图 7.84 所 示 。 

Step06 使 用 椭圆 工具 绘制 圆 形 ， 作 为 手势 指示 器 ， 如 图 7.85 所 示 。 

Step07 展开 “内 容 ” 中 的 “变换 : 椭圆 1” ， 在 “位 置 ”参数 处 右 击 ， 在 弹出 
的 快捷 菜单 中 选择 “ 重 置 ”命令 ， 重 置 椭圆 的 位 置 ， 如 图 7.86 所 示 。 
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电 里 
PR rassdz 


3 _dTDnRajpg 





7.85 
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7.86 
Step08 设置 “椭圆 路 径 1” 中 “大 小 ”为 136,136， 如 图 7.87 所 示 。 








7.87 


Step09 将 画 好 的 圆 形 图 层 重 命名 为 “手势 ”， 在 该 图 层 上 右 击 ， 在 弹出 的 快捷 
Ef 中 选择 “图 层 样式 > 投影” 命令， 为 其 添加 投影 ， 如 图 7.88 所 示 。 
























































181 


UI 交互 动 效 必修 课 


Step10 设置 








投影 的 “不 透明 度 ” 为 50%， 如 图 7.89 








所 示 。 





图 7.89 





Stepl1 设置 





如 医 











7.90 所 示 ， 


“手势 ”图 











层 的 “不 透明 度 ” 为 80%, 再 次 调整 “大 小 ”为 “108,108”， 





并 选择 “效果 > 风格 化 > 发光” 命令 为 





图 7.90 


手势 添加 发 光 效果 。 














Step12 为 手势 设置 移动 和 点 击 动画 ， 如 图 7.91 所 示 ， 








Step13 打开 





如 医 
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7.92 所 示 。 








关键 帧 曲线 编辑 器 , 拖 动 左 人 





























的 黄色 小 了 





设置 好 后 对 关键 帧 进行 缓 动 。 
柄 , 使 动画 开始 得 快 一 点 儿 ， 
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00000 


He f 








7.92 


Step14 打开 风景 素材 的 3D 图 层 ， 为 图 层 的 “Y 轴 旋转 ”设置 0 ~ 90 的 关键 帧 ， 
使 其 进行 翻转 动画 ， 如 图 7.93 所 示 。 























183 


UI 交互 动 效 必修 课 























Step15 在 风景 层 翻转 后 的 时 间 上 , 将 “ 预 合 成 1 的 前 半 段 剪 切 掉 , 并 为 其 设置 “ 缩 
放 ” 和 “了 了 轴 旋 转 ” 的 关键 帧 ， 制 作 其 翻转 过 头 再 弹 回来 的 动画 ， 如 图 7.94 所 示 。 





















































图 7.94 


Step16 设置 手势 移动 到 左 侧 箭头 处 单 击 的 动画 ， 设 置 手势 的 “位 置 ” 和 “缩放 ” 
动画 ， 如 图 7.95 所 示 。 






































_yurisa _ 


3339 2996 
[3 HH 





图 7.95 


Step17 手势 单 击 完 箭头 图 标 ， 再 设置 卡片 依次 转 回去 的 动画 ， 操 作 相 同 ， 这 里 


















































不 再 歼 述 。 
至 此 ， 本 案例 就 全 部 制作 完成 了 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 


7.2.2 ”启动 页 动 效 
本 小 节 将 讲解 3 个 启动 页 动 效 的 制作 方法 。 


1. 启动 页 动 效 1 

先 制 作 第 一 个 启动 页 动 效 ， 案 例 最 终 效 果 如 图 7.96 所 示 。 

Step01 在 AE 中 导入 素材 文件 “一 .psd”， 注 意 在 导入 时 选择 “导入 ”为 “合并 - 

保持 图 层 大 小 ”。 
Step02 选择 蓝 色 背景 “矢量 智能 对 象 "图 层 , 单 击 S 键 调 出 “缩放 ”属性 , 设置 “ 缩 

放 ” 关 键 帧 ， 设 置 背景 由 无 到 有 ， 中 间 K 一 帧 大 一 点 儿 的 值 ， 再 缩 回 正 常 值 使 其 

有 节奏 ， 如 图 7.97 所 示 。 
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海量 高 清 视频 


极致 观 影 体验 光量 高 清 视频 


极致 观 影 体验 





















































男 
图 
加 
加 
于 s 
国 
加 10 
图 7.97 
Step03 选择 “海量 高 清 视频 ……” 文 字 图 层 ， 使 用 钢笔 工具 绘制 蒙 版 ， 将 两 段 
文字 单独 勾 出 来 ， 如 图 7.98 所 示 。 
人 海量 高 清 视 频 
将 里 局 消 倪 M 
图 7.98 





Step04 通过 设置 蒙 版 模式 为 “ 相 加 ”或 “ 相 减 ” 即 可 控制 选择 隐藏 哪 段 文字 ， 
如 图 7.99 所 示 。 

Step05 再 复制 出 来 一 层 “ 海 量 高 清 视频 ……”， 将 蒙 版 模式 设置 为 “ 相 减 ”， 
即 可 将 两 段 文 字 拆 分 开 来 。 
Step06 对 两 段 文字 的 “不 透明 度 ”设置 关键 帧 , 使 其 从 无 到 有 , 并 移动 关键 帧 位 置 ， 
使 两 段 文字 有 先后 顺序 ， 如 图 7.100 所 示 。 
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Step07 对 “饮料 ”的 “位 置 ” 作 关键 帧 动画 ， 使 饮料 从 


本 本 有 





的 位 置 ， 如 





受 | 
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7.101 所 示 。 


极致 观 影 体验 


海量 高 清 视频 


图 7.100 


到 观 影 








h 心 位 置 移动 














到 原来 
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图 7.101 
Step08 对 饮料 杯子 的 “缩放 ”设置 缩放 关键 帧 , 数值 为 “0,0 ~ 110,110 ~ 100,100”， 
并 设置 “旋转 ”动画 ， 使 其 左右 摇晃 ， 如 图 7.102 所 示 ， 并 选择 设置 的 旋转 关键 帧 转 
换 为 缓 动 。 



































图 7.102 
Step09 将 椅子 、 电 影 票 、 眼 镜 、 屏 幕 的 锚 点 移动 到 饮料 的 中 心 点 〈 辅 助 线 交叉 
位 置 ) ， 对 它们 的 “缩放 ”统一 添加 关键 帧 ， 所 有 的 物品 都 从 中 间 缩 放 至 原始 斥 寸 ， 
如 图 7.103 所 示 。 












































图 7.103 
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Step10 设置 爆 米花 的 “不 透明 度 ” 关 键 帧 ， 使 其 从 无 到 有 ， 如 图 7.104 所 示 


一 二 




















































































图 7.104 
为 要 为 星星 设置 动画 ， 所 以 这 里 需要 在 AE 中 对 照 原始 的 星星 再 绘制 一 下 
图 形 。 
Step01 使 用 “ 星 形 工具 ” 画 出 五 个 星星 ， 并 移动 位 置 
的 位 置 上 ， 如 图 7.105 所 示 。 








匹配 到 原始 图 层 “ 黄 星星 ” 


图 7.105 









































Step02 隐藏 “ 黄 星星 ”图 层 ， 对 最 中 间 的 星星 设置 缩放 的 关键 帧 ， 从 小 变 大 ， 
再 设置 其 他 4 个 星星 的 位 置 和 旋转 ，4 个 星星 第 45 帧 与 中 间 的 星星 重 又 ， 如 图 7.106 
所 示 。 














图 7.106 
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Step03 对 4 个 星星 设置 “不 透明 度 ” 关 键 帧 ， 使 它们 在 第 44 帧 之 前 透明 度 为 0， 
如 图 7.107 所 示 。 

















图 7.107 


Step04 设置 散落 的 白星 星 的 动画 ， 设 置 “ 不 透明 度 ” 为 0 ~ 100 的 关键 帧 ， 制 
作出 一 闪 一 闪 的 效果 ， 如 图 7.108 所 示 。 





























图 7.108 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 





2. 启动 页 动 效 2 
本 小 节 讲 解 第 2 个 启动 页 的 动 效 ， 案 例 最 终 效果 如 图 7.109 所 示 。 








电影 达 人 倾 力 推荐 电影 达 人 倾 力 推荐 
精彩 好 片 ! 精彩 好 片 尽 收 眼 [ 
图 7.109 



































Step01 打开 素材 源 文件 “2- 初始 .aep”， 双 击 “ 打 板 ” 图 层 进入 其 预 合成 ， 可 
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以 看 到 分 开 的 两 个 板 ， 如 图 7.110 所 示 。 














图 7.110 



































Step02 使 用 图 “向 后 平移 锚 点 工具 ”将 “图 层 3” 的 
锚 点 位 置 移动 至 图 7.111 所 示 的 关节 位 置 。 

Step03 对 “图 层 3” 的 “旋转 ”K 帧 ， 制 作 合 上 并 打 
开 的 动画 ， 如 图 7.112 所 示 。 
Step04 回 到 “二 ”合成 中 ， 对 “ 打 板 ”的 “位 置 ” 
设置 位 移 关键 帧 ， 使 其 从 画面 的 中 心 移动 至 紫色 背景 的 左 
下 角 ， 并 设置 “缩放 ”关键 帧 ， 使 其 同时 进行 由 大 变 小 的 
动画 ， 如 图 7.113 所 示 。 




















































































































图 7.112 














Step05 选中 图 7.114 中 的 另外 4 个 物件 的 图 层 。 
Step06 将 它们 的 锚 点 位 置 移动 到 合成 画面 的 中 心 位 置 ， 并 对 “缩放 ”K 帧 ， 
间 帧 给 予 一 个 大 一 点 儿 的 值 ， 这 样 制作 出 的 动画 会 有 节奏 感 ， 如 图 7.115 所 示 。 
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电影 达 人 倾 力 椎 荐 
精彩 好 片 尽 收 眼底 





图 7.115 
Step07 对 金 人 《中间 的 ) 的 “旋转 ”K 帧 ,使 

















IT 





左右 晃动 ， 如 图 7.116 所 示 。 
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图 7.116 


Step08 使 用 星 形 工具 ， 绘 制 出 一 个 星 形 ， 调 整 “点 ”为 4， 四角 星 形 ， 并 调整 
其 他 参数 ， 放 置 在 蓝 色 和 镜片 的 右上 角 ， 如 图 7.117 所 示 。 





















































图 7.117 
Step09 画 出 一 个 圆 形 , 调整 位 置 大 小 ,放置 在 




















本 

式 
长 
可 





面 ， 如 图 7.118 所 示 。 
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Step10 对 星星 的 “缩放 ”和 “旋转 ”设置 关键 帧 ， 使 星星 从 无 到 有 ， 并 旋转 一 
到 原点 ， 如 图 7.119 所 示 。 











EE 
口 





























7.119 
Step11 按 快捷 键 Alt+ [可 以 设置 素材 的 入 点 ， 如 图 7.120 所 示 。 





图 7.120 


Step12 对 黄色 星星 的 “不 透明 度 ” 设 置 关键 帧 ， 制 造 出 一 闪 一 闪 的 效果 ， 并 按 
F9 键 进行 缓 动 ， 如 图 7.121 所 示 。 





















电影 达 人 倾 力 椎 荐 
精彩 好 片 尽 收 眼底 


图 7.121 


Step13 在 “ 预 合 成 3” 中 ， 对 胶卷 带 的 “路 径 ”设置 关键 帧 ， 创 建 球 动 的 感觉 ， 














如 图 7.122 所 示 。 
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Step14 使 用 钢笔 工具 在 “电影 …… ”文字 图 层 上 画 一 个 蒙 版 , 移动 蒙 版 顶点 位 置 ， 
对 蒙 版 路 径 K 帧 ， 使 文字 从 无 到 有 ， 注 意 蒙 版 模式 为 “ 相 减 ”， 如 图 7.123 所 示 。 





他 影 达 人 倾 / 椎 荐 | 
人 
精彩 好 片 尽 收 眼底 





图 7.123 
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电影 达 人 倾 力 椎 荐 | ， 
精彩 好 片 尽 收 眼 底 





图 7.123 ( 续 ) 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 


3. 启动 页 动 效 3 
本 小 节 讲 解 第 3 个 启动 页 动 效 ， 案 例 最 终 效果 如 图 7.124 所 示 。 








oD Wy 























分 享 观 影 感受 分 享 观 影 感受 分 享 观 影 感受 
感悟 光影 人 生 感悟 光影 人 生 感悟 光影 人 生 
7.124 
Step01 打开 素材 源 文件 “3- 初始 .aep”， 将 “分 享 ……” 文 字 图 层 复制 出 一 份 ， 


























分 别 用 钢笔 工具 画 蒙 版 ， 拆 开 成 为 两 个 单独 的 图 片 文字 ， 如 图 7.125 所 示 。 





























WUF 


Dei 
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Step02 对 两 个 文字 层 的 “位 置 ”进行 关键 帧 设置 ， 并 移动 关键 帧 到 第 16 帧 的 位 





， 如 图 7.126 所 示 。 




















Step03 移动 到 

















图 7.126 


























分 别 由 两 侧 进 入 画 


WA 


图 7.127 


Step04 选择 设置 好 的 关键 帧 ， 按 F9 键 进行 缓 动 。 
Step05 设置 爆 米花 桶 的 动画 ， 对 它 的 “位 置 ” 及 “缩放 ”添加 关键 帧 ， 第 4 帧 








时 爆 米花 桶 在 画 枯 














的 外 面 ， 如 图 7.128 所 示 。 











第 一 帧 的 位 置 ， 将 两 个 文字 移动 到 合成 外 面 ， 
， 如 图 7.127 所 示 。 

















设置 关键 帧 ， 使 其 
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Step06 第 14 帧 处 ， 桶 移入 原 位 ， 按 F9 键 缓 动 所 有 的 帧 ， 如 图 7.129 所 示 。 





图 7.129 
Step07 将 爆 米花 的 父 级 链接 到 桶 上 ， 产 生父 子 级 关系 ， 并 对 爆 米花 的 “缩放 ” 
设置 关键 帧 ， 制 作 爆 米花 要 爆 出 的 感觉 ， 如 图 7.130 所 示 。 











图 7.130 








Step08 单 击 “ 矢 量 智能 对 象 ”图 层 前 面 的 “独奏 - 隐藏 所 有 非 独奏 视频 ”按钮 ， 
1 可 单独 显示 该 图 层 ， 将 “矢量 智能 对 象 ” 图 层 ， 也 就 是 散落 的 爆 米 花 ， 单 独 显示 ， 
fF 将 左下 角 的 两 个 用 蒙 版 勾 出 ， 如 图 7.131 所 示 。 















































天 






































J 
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Step09 对 散落 的 爆 米花 的 “位 置 ” 设 置 关键 帧 ， 使 其 由 桶 上 方 掉 落 在 桶 右 下 角 
后 方 的 位 置 ， 如 图 7.132 所 示 。 























图 7.132 


Step10 对 掉 落 爆 米 花 的 “不 透明 度 ”设置 关键 帧 , 使 其 突然 出 现 , 而 不 是 一 直 存 在 ， 
如 图 7.133 所 示 。 




















图 7.133 








Stepl1 复制 “矢量 智能 对 象 ”图 层 ， 并 调整 蒙 版 位 置 ， 这 次 勾 出 右 下 方 单独 的 
一 粒 爆 米花 ， 同 样 对 “位 置 ” 和 “不 透明 度 ” 设 置 关键 帧 ， 使 其 由 上 向 下 掉 落 ， 按 
F9 键 对 关键 帧 进行 缓 动 ， 如 图 7.134 所 示 。 



























































图 7.134 
Step12 再 复制 出 来 一 层 “ 矢 量 智能 对 象 3”， 同 样 对 剩余 的 一 颗 爆 米花 设置 掉 
落 及 不 透明 度 关键 帧 ， 并 将 “矢量 智能 对 象 3” 链 接 到 爆 米 花 上 ， 建 立 父子 级 关系 ， 
如 图 7.135 所 示 。 
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所 示 。 


Step14 
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图 7.136 


























而 具 由 











性 的 动画 效果 ， 如 


图 7.137 所 示 。 





图 7.137 

















Step15 复制 关键 帧 ， 使 其 弹性 效果 有 连续 性 ， 如 图 7.138 所 示 。 








左 侧 进 入 画面 内 ， 并 在 第 37 帧 的 位 置 对 “缩放 ”K 帧 ， 











7.136 





使 其 








有 弹 
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类 似 的 方法 对 “饮料 ”的 “缩放 ”及 “旋转 ”K 帧 ， 饮 料 











小 变 大 




















Step16 使 
并 左右 摇晃 ， 如 图 7.139 所 示 。 
图 7.139 
Step17 对 “ ”的 “不 透明 度 ” 设 置 关键 帧 , 制作 
所 示 。 








一 闪 一 闪 的 动画 , 如 








7.140 








图 7.140 
Step18 将 “眼镜 ”图 层 复 制 两 份 ， 对 眼镜 


版 模式 为 “ 相 加 ”， 在 “效果 ”中 
此 插件 ) ， 并 对 参数 进行 调整 ， 如 














ga Ee 
FEC Uight Blast 
FEC Light Burst 
FEC Light Rays 
FEC Uight $ 


mmoye 





FEC Particle 
FEC Perspective 


FEC Light Tomado 
FEC Uight Whirl 
FEC Spothight 





7.141 








添加 FEC Light 9 
图 7.141 所 示 。 

























的 左右 镜片 单独 用 钢笔 工具 勾 出 ， 蒙 
ph 的 FEC Light Sweep (需要 安装 

















Step19 可 以 对 Light Angle (灯光 角度 ) 进 
制作 动画 ， 如 图 7.142 所 示 。 














行 关 键 帧 设置 ， 控 制 手 柄 角度 变化 来 





图 7.142 
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Step20 也 可 以 对 Light Center 〈 灯 光 中 心 ) 位 置 进行 天 帧 ， 整 体 从 右 至 左 移动 产 
生变 化 ， 如 图 7.143 所 示 。 


























图 7.143 


Step21 使 用 相同 的 方法 对 红色 镜片 做 出 动画 。 























Step22 将 图 7.144 所 示 的 4 个 图 层 的 运动 模糊 打开 。 





图 7.144 


至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 











7.2.3 ”地 图 搜索 


本 小 节 将 讲解 一 个 地 图 搜索 的 APP 动 效 页 面 的 制作 ， 案 例 最 终 效果 如 图 7.145 太吉 友 台 
所 示 。 
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图 7.145 





Step01 导入 素材 文件 “location2.psd” 和 “4.psd”, 双击 进入 “location2”, 设置 “地 
图 ”素材 放大 缩小 的 动画 ， 如 图 7.146 所 示 。 





图 7.146 


Step02 选中 5 个 缩放 关键 帧 ， 右 击 ， 在 弹出 的 快捷 菜单 中 选择 “关键 帧 辅助 > 




















缓 动 ”命令 ， 将 关键 帧 缓 动 ， 如 图 7.147 所 示 。 
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Step03 对 地 图 的 定位 图 标 “location 图 标 ” 进 行 相 同 的 缩放 动画 ， 并 按 F9 键 将 


关键 由 转换 为 缓 动 ， 








层 为 “btn 2”， 为 其 “缩放 ”设置 关键 帧 ， 














如 图 7.148 所 示 。 

















图 7.148 


Step04 双击 “get_directions_btn” 进 入 该 合成 ， 选 择 “btn” 素 材 ， 将 其 复制 一 


EC SR CN EE 
Fy 四 4 ica 


图 


7.149 












































为 “42 的 “位 置 ” 


下 面 制作 单 击 按钮 后 ， 侧 边栏 划 入 界面 的 动画 。 














可 到 “location2” 合 成 ， 将 所 有 素材 进行 预 合 成 ， 将 “4” 合 成 


制作 出 点 击 动画 效果 ， 如 图 7.149 所 示 。 





拖 入 时 间 栏 项 部 ， 








属性 设置 关键 帧 ， 使 其 滑 入 界面 ， 


























在 其 





撞 到 界 理 











边框 的 时 候 ， 做 
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一 下 回 弹 的 动画 ， 


出 


会 让 画面 显得 更 有 弹性 ， 如 图 7.150 所 示 。 








图 7.150 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 








7.2.4 ”加 载 刷新 
本 小 节 将 制作 一 个 APP 的 加 载 刷新 页 面 动 效 ， 案 例 最 终 效 果 如 图 7.151 所 示 。 


























图 7.151 























Step01 导入 素材 文件 “刷新 .psd”， 使 用 钢笔 工具 绘制 正方 形 图 形 ， 如 图 7.152 
所 示 。 

Step02 在 正方 形 中 间 添 加 一 个 锚 点 ， 如 图 7.153 所 示 。 

Step03 对 方块 的 路 径 设置 关键 帧 , 第 1 个 关键 帧 移动 方块 下 方 的 3 个 锚 点 至 上 方 ， 
使 其 与 上 方 重 合 ， 不 见方 块 ; 第 2 个 关键 帧 ， 将 下 方 中 间 的 锚 点 向 下 拖 动 ， 做 出 拉 
伸 效 果 ; 第 3 个 关键 帧 与 第 2 个 关键 帧 相同 ; 第 4 个 关键 帧 恢复 为 原始 状态 ， 如 图 
7.154 所 示 。 
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9:42 AM 


菜单 
食物 
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Step04 使 用 椭 

















员 











Step05 在 AI 


有 
LI 
加 





绘制 一 个 箭头 ， 并 复制 箭头 形状 ， 


* 形 杖 BE 


图 7.154〈 续 ) 











具 绘 制 一 个 橘 色 的 圆 ， 命 名 “qiu”， 如 图 





图 7.155 





箭头 形状 ， 如 图 7.156 所 示 。 























7.155 所 示 。 











在 AE 新 要 


的 形状 图 
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Step06 将 箭头 缩小 匹配 到 圆 形 上 , 并 将 箭头 和 圆 形 打包 预 合成 , 如 图 7.157 所 示 。 




















Step07 将 “navbar” 和 移动 到 顶 








图 7.157 





层 ， 制 作 箭头 球 跟随 方块 拉 伸 的 动画 ， 使 小 球 跟 着 


弹性 的 边缘 一 起 运动 ， 如 图 7.158 所 示 。 





图 7.158 
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Step08 当 弹 性 达到 最 大 值 的 时 候 ， 进 入 箭头 小 球 合成 ， 设 置 箭头 的 朝向 向 下 的 
动画 ， 如 图 7.159 所 示 。 

















图 7.159 




















208 


第 7 章 酷 炫 插件 及 APP 动 效 





图 7.160 〈 续 ) 


Step10 使 用 文本 工具 创建 文本 “Loading…”， 如 图 7.161 所 示 。 











圈 























食物 


Loadirg.… 

















Stepl1 为 “Loading…” 的 “不 透明 度 ” 设 置 不 同 的 关键 帧 ， 使 其 





最 大 时 显示 ， 并 闪烁 几 下 ， 如 图 7.162 所 示 。 








在 方块 拉 什 到 
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Step12 为 刷新 图 标 设置 旋转 关键 帧 ， 数 值 分 别 是 


90" 一 0" X0.0"”， 如 





受 











7.163 所 示 。 


“0。 xXx0.0°~0° X90°~0° XxX 





Step13 在 方块 向 下 拉 伸 加 载 时 ， 列 表 也 要 随 之 向 下 移动 ， 当 loading 结束 后 回归 














原 位 ， 为 “item 1”“item 2”“item 3” 设 置 “位 置 ”关键 帧 ， 如 图 7.164 所 示 。 
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图 7.164 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 





7.2.5 ”播放 器 翻 页 
本 小 节 将 制作 一 个 播放 器 翻 页 的 动 效 页 面 ， 案 例 最 终 效果 如 图 7.165 所 示 。 。。 训 














图 7.165 
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Step01 将 提供 的 素材 文件 全 部 导入 AE， 并 摆 放 好 其 位 置 ， 使 用 椭圆 工具 画 出 一 
个 圆 形 作为 手势 ， 如 图 7.166 所 示 。 
























































’ 
: * [mE 





图 7.166 


Step02 打开 椭圆 的 “变换 : 椭圆 1”， 在 “位 置 ” 属 性 上 右 击 ， 在 弹出 的 快捷 菜 
单 中 选择 “ 重 置 ”， 如 图 7.167 所 示 。 












































Step03 调整 椭圆 大 小 ， 如 图 7.168 所 示 ， 并 将 椭圆 重 命名 为 “手势 ”。 

















Step04 在 “手势 ”图 层 上 右 和 
命令 ， 如 图 7.169 所 示 。 


何 注意 
在 设置 时 先 把 “位 置 ” 设 置 帧 再 调整 “ 边 角 定 位 ”。 
Step05 同样 ， 为 “手势 ”添加 “投影 ”效果 ， 如 图 7.170 所 示 。 


在 弹出 的 快捷 菜单 中 选择 “图 层 样式 > 外 发 光 ” 








LIT 
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7.169 图 7.170 


Step06 调整 投影 的 “角度 ”和 “距离 ”， 如 图 7.171 所 示 。 








图 7.171 


Step07 给 手势 作 循环 拨 动 卡片 的 动画 , 让 手势 作 向 右 移动 , 缩小 点 击 , 向 左 拖 动 ， 
释放 还 原 的 一 些 列 动作 ， 如 图 7.172 所 示 。 











图 7.172 


Step08 将 唱片 图 片 与 模板 纯色 卡片 对 位 。 选 中 要 滑动 的 唱片 图 片 ， 选 择 “ 效 果 > 
扭曲 > 边 角 定 位 ”命令 ， 如 图 7.173 所 示 。 
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Step09 为 了 对 位 方便 ， 调 整 唱片 图 片 的 “不 透明 度 ” 为 20%， 如 图 7.174 所 示 。 


Ci 4 
ee 





图 7.174 
Step10 调整 “ 左 一 ”图 层 “ 边 角 定 位 ”中 的 “右上 ”及 “ 右 下 ”， 使 其 对 齐 左 





























一 底 色 图 层 ， 如 图 7.175 所 示 。 














图 7.175 


Stepll 调整 “ 左 二 ”图 层 “ 边 角 定 位 ”中 “右上 ”及 “ 右 下 ”， 使 其 对 齐 左 二 
底 色 图 层 ， 如 图 7.176 所 示 。 














图 7.176 




















Step12 调整 “种 ”图 层 “ 边 定位 ” 由 “ES 及 “二 E> 使 
底 色 图 层 ， 如 图 7.177 所 示 。 





对 齐 右 一 






































214 


第 7 章 酷 炫 插件 及 APP 动 效 





图 7.177 


Step13 将 “中 间 ” 的 “位 置 ? 及 “ 边 角 定位 ”的 “右上 / 右 下 ”的 控制 点 设置 关键 帧 ， 
使 其 滑动 至 左 侧 ， 如 图 7.178 所 示 。 





















































图 7.178 
Step14 对 其 他 的 唱片 图 片 也 分 别 设置 滑动 动画 ， 并 设置 “ 边 角 定 位 ”， 使 切 页 
动画 循环 起 来 。 
人 注意 
在 设置 时 先 把 “位 置 ”设置 帧 再 调整 “ 边 角 定 位 ”。 
Step15 将 “中 间 ” 和 “ 右 二 ” 层 开 启 3D 图 层 ， 如 图 7.179 所 示 。 



































图 7.179 


Step16 在 第 23 帧 位 置 上 调整 Z 轴 位 置 为 -50， 使 之 位 于 中 间 图 层 的 最 上 方 ， 如 
































图 7.180 所 示 。 
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Step17 下 半 部 分 的 





如 图 7.181 所 示 。 























叶 窗 折 革 效果, 注意 


图 7.180 




















Step18 帮 
2 个 列表 翻转 


图 7.181 





F 启 这 些 图 








层 的 “3D 





过 | 











屋 ” 属 性 ， 


折 释 起 来 ， 如 图 7.182 所 示 。 
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层 的 锚 点 位 置 要 在 折 苔 图片 的 边缘 ， 


h 间 的 
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Step19 其 他 的 列表 素材 也 相继 折 志 起来, 再 调整 长 度 及 持续 时 间 , 如 图 7.183 所 示 。 

















图 7.183 
全 提示 
使 用 快捷 键 “Altt [” 或 “Altt] ”修剪 列表 素材 出 现 及 消失 长 度 。 
至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 书 教学 视频 。 
7.2.6 ”外卖 
本 小 节 将 讲解 一 个 外 卖 的 APP 界面 动 效 的 制作 ,案例 最 终 效果 如 图 7.184 所 示 。 
































图 7.184 
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Step01 在 AE 











导入 所 有 素材 文件 ， 给 列表 的 “位 置 ”属性 设置 关键 帧 ， 制 作 














列表 从 下 往 上 进入 界 下 























的 动画 ， 如 图 7.185 所 示 。 














图 7.185 





Step02 为 了 使 页 面 进入 的 过 程 更 有 节奏 ， 在 中 间 添 加 一 帧 关键 帧 ， 使 其 在 位 移 





到 原 位 之 前 上 














了 向 上 一 些 ， 再 反弹 回来 ， 如 图 7.186 所 示 。 




















Step03 设置 完 
关键 帧 转换 为 缓 动 ， 如 





图 7.186 








后 ， 移 动 帧 ， 使 其 有 一 些 错 落 感 ， 使 动画 更 有 节奏 ， 并 按 F9 键 将 





过 











7.187 所 示 。 
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Step04 为 橘 色 按 钮 “bg ”设置 “缩放 ”的 关键 帧 ， 制 作 按 下 的 动画 ， 如 图 7.188 所 示 。 












更 多 信息 





图 7.188 


Step05 为 订单 框 的 蒙 版 设置 形状 变形 动画 ， 并 对 其 “位 置 ”设置 关键 帧 ， 使 其 
从 购物 车 后 面向 左 移动 出 来 ， 由 圆 形变 为 椭圆 ， 如 图 7.189 所 示 。 









































图 7.189 


Step06 将 “你 的 订单 : 39 元 ”图 层 设 置 “ 不 透明 度 ”， 数 值 为 0 一 100， 使 其 
从 无 到 有 ， 如 图 7.190 所 示 。 











图 7.190 


Step07 使 用 钢笔 工具 在 “你 的 订单 : 39 元 ”图 层 上 的 39 元 位 置 处 画 蒙 版 ， 并 












































将 蒙 版 模式 设置 为 “ 相 减 ”， 如 图 7.191 所 示 。 
Step08 新 建文 本 层 “9 元 ”， 放 置 在 “39 元 ”处 ， 设 置 其 “不 透明 度 ” 动 画 ， 
数值 为 0 ~ 100， 使 其 从 无 到 有 ， 如 图 7.192 所 示 。 
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wy 你 的 订单 : 





TY ， 
全 :35 元 


图 7.191 





图 7.192 


Step09 为 “9 元 ”文本 图 层 设置 “ 源 文 本 ”的 帧 ，45 帧 为 “9 元 ”，50 帧 为 “39 
元 ”， 使 单 击 “ 添 加 订单 30 元 ”按钮 后 ， 由 9 元 变 为 39 元 ， 如 图 7.193 所 示 。 


























你 的 订单 : 及 3 提 





图 7.193 





Step10 按 快捷 键 CtrltshifttC, 将 所 有 图 层 打 包 至 “ 预 合 成 1”， 如 图 7.194 所 示 。 
Step1l1 导入 素材 文件 “check” 界 面 为 合成 ， 将 锚 点 设置 到 辅助 线 交 叉 的 地 方 ， 
设置 所 有 图 层 的 “缩放 ”为 0% ~ 100%， 使 其 由 小 变 大 ， 如 图 7.195 所 示 。 
Step12 新 建 一 个 纯色 层 ， 将 纯色 设置 为 深 灰色 ， 如 图 7.196 所 示 。 
Step13 设置 灰色 底 的 “不 透明 度 ” 为 0% ~ 80%， 使 其 从 无 到 有 ， 
至 两 个 撕 纸 层 的 下 方 ， 如 图 7.197 所 示 。 












































串 
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ull 





移动 
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新 建 
合成 设置 … 
预 雹 (P) :> 
切 滴 3D 视图 » 
在 项 目 中 显示 合 成 
在 后 台 括 存 工作 区 域 
合成 流民 图 
合成 向 型 流程 图 

图 7.196 
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宇 对 登 (N) 

形状 图 层 

请 整 图 层 (A) 

Adobe Photoshop 文件 (H).. 
MAXON CINEMA 4D 文件 ().… 
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7.197 
Step14 修剪 “ 撕 纸 02”， 二 
计 ” 上 方 直 线 的 右 侧 位 置 ， 如 图 7.198 所 示 。 





复制 “ 撕 纸 02” 到 105 帧 开始 位 置 ， 设 置 销 点 到 “总 





ea npn 


[ep 


er 


7.198 


p15 设置 撕 纸 掉 落 的 动画 , 然后 按 F9 键 缓 动 , 完成 整个 动画 , 如 图 7.199 所 示 。 


5760. 6720 
和 


5 


二 





Ee 


图 7.199 


至 此 ， 本 案例 全 部 制作 完成 ， 更 详细 的 步骤 可 参见 随 
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标准 通用 标记 语言 下 的 一 个 应 用 HTML 标准 自 1999 年 12 月 发 布 HTML 4.01 后 ， 
后 继 的 HTML 5 和 其 他 标准 被 束之高阁 ， 为 了 推动 Web 标准 化 运动 的 发 展 ， 一 些 公 
司 联合 起 来 ， 成 立 了 一 个 叫 作 “ Web Hypertext Application Technology Working Group 

(Web 超 文本 应 用 技术 工作 组 -WHATWG) ”的 组 织 。WHATWG 致力 于 Web 表单 

和 应 用 程序 , 而 W3C[World Wide Web Consortium (万 维 网 联盟 ) ] 专注 于 XHTML 2.0。 
在 2006 年 ， 双 方 决定 进行 合作 ， 来 创建 一 个 新 版 本 的 HTML。 

HTML 5 草案 的 前 身 名 为 Web Applications 1.0， 于 2004 年 被 WHATWG 提出 ， 
于 2007 年 被 W3C 接纳 ， 并 成 立 了 新 的 HTML 工作 团队 。 































































































@ 8.1 HTML 5 的 三 个 优势 
HTML 5 的 发 展 史 ， 如 图 8.1 所 示 。 
HTML 的 发 展 史 


996(W3C 
HTML3.2 

















1. 多 设备 跨 平台 

用 HTML 5 的 优点 主要 在 于 ， 这 个 技术 可 以 跨 平台 使 用 。 比 如 你 开发 了 一 款 
HTML 5 的 游戏 ， 你 可 以 很 轻易 地 将 其 移植 到 UC 的 开放 平台 、Opera 的 游戏 中 心 、 
Facebook 应 用 平台 ， 甚 至 可 以 通过 封装 的 技术 发 放 到 App Store 或 Google Play 上 ， 
所 以 它 的 跨 平台 性 非常 强大 ， 这 也 是 大 多 数 人 对 HTML5 有 兴趣 的 主要 原因 。 


2. 自 适应 网 页 设计 

很 早 就 有 人 设想 ， 能 不 能 “一 次 设计 ， 普 遍 适 用 ”， 让 同一 张 网 页 自动 适应 不 
同 大 小 的 屏幕 ， 根 据 屏幕 宽度 ， 自 动 调整 布局 (Layout) 。 

2010 年 ，Ethan Marcotte 提出 了 “ 自 适应 网 页 设计 ”这 个 名 词 ， 指 可 以 自动 识别 
屏幕 宽度 ， 并 做 出 相应 调整 的 网 页 设计 。 

这 就 解决 了 一 种 传统 的 局 面 一 一 网 站 为 不 同 的 设备 提供 不 同 的 网 页 ， 比 如 专门 
提供 一 个 Mobile 版 本 ， 或 者 iPhone / iPad 版 本 。 这 样 做 固然 保证 了 效果 ， 但 是 比较 
麻烦 ， 同 时 要 维护 好 几 个 版 本 ， 而 且 如 果 一 个 网 站 有 多 个 Portal (入 口 ) ， 会 大 大 增 
加 架构 设计 的 复杂 度 。 
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而 HTML 5 的 媒体 查询 功能 很 好 地 解决 了 一 套 代 码 、 一 套 资源 和 数据 库 ， 根 据 
不 同 屏幕 分 辩 率 响应 ， 输 出 适 配 布局 合理 美观 的 页 面 。 


3, 即时 更 新 

游戏 客户 端 每 次 都 要 更 新 ， 很 麻烦 ， 而 更 新 HTML 5 游戏 就 好 像 更 新 页 面 一 样 ， 
即时 更 新 。 

一 套 代 码 响 应 多 个 分 辩 率 。 








加 





@ 8.2 HTML 5 八大 特性 


1. 语义 特性 〈Class:Semantic) 
HTML 5 赋予 网 页 更 好 的 意义 和 结构 。 


2. 本 地 存储 特性 〈Class:Offline & Storage) 
基于 HTML 5 开发 的 网 页 APP 拥有 更 短 的 启动 时 间 、 更 快 的 联网 速度 ， 这 些 全 
得 益 于 HTML 5 APP Cache， 以 及 本 地 存储 功能 。 


3, 设备 兼容 特性 〈Class:Device Access) 
HTML 5 提供 了 前 所 未 有 的 数据 与 应 用 接 入 开放 接口 。 使 外 部 应 用 可 以 与 浏览 器 
内 部 的 数据 直接 相连 ， 例 如 视频 影音 可 直接 与 Microphones 及 摄像 头 相连 。 


4. 连接 特性 (Class:Connectivity) 
更 有 效 的 连接 工作 效率 ， 使 得 基于 页 面 的 实时 聊天 、 更 快速 的 网 页 游戏 体验 、 
更 优化 的 在 线 交 流 得 到 了 实现 。HTML 5 拥有 更 有 效 的 服务 器 推送 技术 。 


5. 网 页 多 媒体 特性 〈Class:Multimedia) 

支持 网 页 端的 Audio、Video 等 多 媒体 功能 ， 与 网 站 自 带 的 APPS、 摄 像 头 、 影 
音 功能 相得益彰 。 

6. 三 维 、 图 形 及 特效 特性 〈Class:3D、Graphics&Effects) 

基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能 ， 用 户 会 惊叹 于 浏览 器 所 呈现 
的 惊人 视觉 效果 。 

7. 性 能 与 集成 特性 (Class:Performance&Integration) 

没有 用 户 会 永远 等 待 你 的 Loading，HTML 5 会 通过 XMLHttpRequest2 等 技术 ， 
帮助 开发 者 的 Web 应 用 和 网 站 在 多 样 化 的 环境 中 更 快速 地 工作 。 


8. CSS3 特性 〈Class:CSS3) 

在 不 牺牲 性 能 和 语义 结构 的 前 提 下 ，CSS3 提供 了 更 多 的 风格 和 更 强 的 效果 。 此 
外 ， 较 之 以 前 的 Web 排版 ，Web 的 开放 字体 格式 《WOFF) 也 提供 了 更 高 的 灵活 性 
和 控制 性 。 
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@ 8.3 HTML 5 的 应 用 及 布局 方式 














海外 HTML 5 被 用 在 响应 式 网 站 ， 或 社交 网 站 广告 条 及 移动 设备 广告 上 ， 中 国 























HTML 5 被 用 在 移动 互联 网 广告 、APP 的 闪 屏 、 活 动 推 广 、 微 信 、 小 游戏 等 方面 。 
HTML 5 与 传统 div 的 语义 架构 ， 如 图 8.2 所 示 。 
传统 div+CSS 页 面 布局 方式 ， 如 图 8.3 所 示 。 





























图 8.3 


对 于 HTML 5 布局 方式 ， 为 什么 我 们 需要 网 格 布局 ? 





在 我 们 的 Web 内 容 中 ， 可 以 将 其 分 割 成 很 多 个 内 容 块 ， 而 这 些 内 容 块 都 占据 自 




















己 的 区 域 (Regions) ， 可 以 将 这 些 区 域 想像 成 一 个 虚拟 的 网 格 。 网 格 布局 特性 主要 
是 针对 Web 应 用 程序 的 开发 者 ， 可 以 用 这 个 模块 实现 许多 不 同 的 布局 。 网 络 布 局 可 
以 将 应 用 程序 分 割 成 不 同 的 空间 ， 或 者 定义 它们 的 大 小 、 位 置 及 层级 。 

















所 谓 网 格 设计 ， 就 是 把 页 
面 按照 等 比分 成 等 分 格子 ， 然 后 
所 有 元 素 按 照 最 小 单位 的 倍数 
尺寸 来 设计 ， 以 便于 后 期 前 端 排 
版 有 规律 、 定 位 好 算 、 网 页 看 起 
来 规整 、 适 合 响 应 式 多 分 辨 率 
适 配 、 适 合 大 型 动态 网 站 布局 、 
CSS 更 好 写 。 

网 格 布局 ， 如 图 8.4 所 示 。 
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Responsive Grid 
El En EE BP En BP Bl BF Em 
El FE PE FE EE PE FE EE 
EE FE EN EE 
ES EE EE PE 
EE EE 
PER Ps 
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@ 8.4 CSS3 视觉 表现 方面 的 新 特性 


1. 半 透 明 rgba 属性 

在 rgba 出 现 之 前 ， 半 透明 可 以 用 opacity 来 创建 ， 可 是 这 样 导 致 的 结果 是 不 仅 元 
素 的 背景 会 变 透 明 ， 标 签 元 素 包 含 的 文字 也 会 变 透明 。 

2. Background-image (多 背景 图 ) 

以 前 Backround-image 只 支持 一 个 图 片 ， 现 在 可 以 支持 多 个 图 片 ， 只 要 把 它们 
逗号 隔 开 就 行 了 ， 格 式 如 下 。 

background: 




































































[el 


[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat], 
[background-image] [background-position] [background-repeat]; 


3. Border-image (边框 图 片 ) 

Border-image 主要 是 用 图 片 来 填充 边框 。 

Border-image 的 分 解 属性 如 下 。 

(1) border-image-source 指定 border 的 背景 图 的 url。 

(2) border-image-slice 设置 图 片 如 何 切 割 的 属性 ， 非 定位 。 

(3) border-image-width 定义 border-image 的 显示 区 域 。 

(4) border-image-repeat 定义 border-image 的 重复 方式 。 

(5) [stretch | repeat | round] : 拉 伸 | 重复 | 平 铺 〈 其 中 stretch 是 默认 值 ) 。 
边框 图 片 用 例如 图 8.5 所 示 。 











Lorem ipsum dolor sit amet. : 图 二 
be 


border-image: urllborder.png) 27 27 27 27 round round; 
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人 em 区 人 图 三 
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border-smage: urllborder.png) 27 27 27 27 stretch strerch; 











图 8.5 
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4. 圆 角 

border-radius: 90px 以 半径 为 90px 的 圆 。 

除了 可 以 同时 设置 4 个 圆 角 以 外 ， 还 可 以 单独 对 每 个 角 进 行 设 置 。CSS3 提供 四 
个 单独 的 属性 对 应 4 个 角 。 

(1) * border-top-left-radius: 125px。 

(2) * border-top-right-radius: 125px。 

(3) * border-bottom-right-radius: 125px。 

(4) * border-bottom-left-radius: 125px。 

border-radius 可 以 同时 设置 1 ~ 4 个 值 。 如 果 设 置 1 个 值 ， 表 示 4 个 圆 角 都 使 
这 个 值 ， 如 果 设 置 两 个 值 ， 表 示 左 上 角 和 右 下 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 

第 二 个 值 ， 如 果 设 置 3 个 值 ， 表 示 左 上 角 使 用 第 一 个 值 ， 右 上 角 和 左下 角 使 用 第 

二 个 值 ， 右 下 角 使 用 第 三 个 值 ， 如 果 设 置 4 个 值 ， 则 依次 对 应 左上 角 、 右 上 角 、 右 
下 角 、 左 下 角 ( 顺 时 针 顺 序 ) ， 如 图 8.6 所 示 。 

(1) border-radius: 125px。 

(2) border-radius: 125px 60px。 

(3) border-radius: 125px 90px 45px。 

(4) border-radius: 125px 90px 45px Spx。 


5. box-shadow 和 text-shadow (盒子 阴影 ) 和 (文字 阴影 ) 
text-shadow 和 box-shadow 都 有 4 个 参数 。 第 一 个 为 水 平 偏 移 量 ; 第 二 个 为 垂直 
偏 移 量 ， 第 三 个 为 模糊 的 像素 宽度 ; 第 四 个 为 颜色 (可 用 rgba 颜色 ) ， 如 图 8.7 所 示 。 



















































































































































































































































































Width-100px; Height 100px; 
Jer 12px solid blue; Background-color: orange; 
der-tof 60px 90px¢ 
jer-bot -radius: 60px 90px; 

64px64px 24px 40px rgba(0,0,0,0.4), 

12px 12px Opx 18px rgba(0,0,0,0.4) inset; 
















Welkom bij 


Rendez 
Vous 





文字 阴影 
如 : text-shadow:5px 3px 4px rgba(0,0,0,0.7)。 
意思 是 说 , 阴影 部 分 向 右 偏 移 5px、 向 下 偏 移 3px、 模 糊 宽度 为 4px、 颜 色 为 黑色 ， 
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并 且 不 透明 度 为 0.7， 效 果 如 图 8.8 所 示 。 


6. 强大 的 CSS 选择 器 
E:hover{ } 等 做 各 种 元 素 状态 ， 如 图 8.9 所 示 。 


7.transform (变换 ) 
值得 注意 的 有 3 个 选项 : skew、rotate 和 scale， 如 图 8.10 所 示 。 


旋转 30” 令 
位 移 100px-10px [| 


缩放 1.9 








Ad 
















S 
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x 
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1 1 





8.9 8.10 
(1) skew。 定 义 沿 着 卫 轴 和 了 轴 的 2D 倾斜 转换 ， 如 图 8.11 所 示 。 
(2) 接 下 来 是 rotate。rotate 接受 一 个 旋转 的 角度 ， 如 图 8.12 所 示 。 
(3) scale。 定 义 2D 缩放 转换 。 接 受 两 个 值 的 时 候 是 分 别 缩 放宽 度 和 高 度 ， 接 受 
一 个 值 的 时 候 ， 高 度 和 宽度 都 根据 该 值 缩放 ， 如 图 8.13 所 示 。 
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图 8.11 图 8.12 





图 8.13 


8. SVG 图 像 使 用 
参数 为 <img src="ICON1.svg" width="600" height="600" alt=""> 的 图 如 图 8.14 所 示 。 


《2 heourrosmm FEATURES Moo paess IE 


SHARE THE CREATIVE PROJECTS YOU'VE 
ALWAYS WANTED TO FINISH 


BIE 


po 


Os 


> 





图 8.14 
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9.transition 《过 渡 ) 

transition 可 以 实现 非常 平滑 的 过 渡 ， 最 重要 的 用 法 就 是 伪 类 用 法 ， 以 前 的 hover 
伪 类 只 能 实现 “瞬间 ”的 变化 ， 有 的 transition 之 后 ， 可 以 实现 平滑 的 过 渡 。 可 以 设 
置 4 个 过 渡 属 性 。 

(1) transition-property。 这 个 属性 是 设置 需要 过 渡 的 属性 ， 如 color、width 等 ， 
默认 为 all， 即 所 有 属性 都 过 渡 。 

(2) transition-duration。 过 渡 所 需 的 时 间 。 

(3) transition-timing-function。 过 渡 方 式 : ease (和 匀速) 、ease-in 加速 )、 
ease-out (减速) 、ease-in-out 〈 先 加 速 再 减速 ) 。 

(4) transition-delay。 过 渡 发 生 的 延迟 。 

各 种 过 渡 效 果 如 图 8.15 所 示 。 




















图 8.15 


10.animation 〈 动 画 ) 

HTML 5 增加 了 animation 〈 动 画 ) 的 属性 ， 这 个 属性 比 transition (过渡) 能 更 
加 细腻 地 控制 动画 的 时 间 和 关键 帧 时 间 位 置 ， 支 持 在 一 个 元 素 上 做 时 间 和 行为 复杂 
的 动画 如 图 8.16 所 示 。 

动画 的 主要 属性 如 下 。 

(1) animation-name。 名 字 ， 关 于 后 续 的 关键 帧 的 定义 。 

(2) animation-duration。 动 画 时间 。 





231 


UI 交互 动 效 必修 课 


(3) animation-iteration-count。 动 男 次 数 ， 可 为 数字 和 infinite (无限 次 ) 。 
(4) animation-timing-function。 动 画 方式 ， 和 transition 一 样 。 





11. 3D Canvas 画布 

HTML Canvas〈 画 布 ) 能 够 帮助 你 更 加 方便 地 实现 2D 绘制 图 形 图 像 及 其 各 种 动 
画 效果 。 我 们 可 以 在 HTML 中 使 用 属性 width 和 height 来 定义 Canvas。 但 是 Canvas 
的 相关 功能 主要 依赖 于 Javascript 实现 ， 即 HTML 5 Canvas API。 我 们 使 用 javascript 
来 访问 和 控制 Canvas 相关 的 区 域 ， 比 如 调用 相关 绘图 的 方法 ， 用 来 动态 生成 需要 的 
动画 或 者 图 形 ， 如 图 8.17 所 示 。 
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图 8.17 
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Sketch 是 由 Bohemian Coding 团队 创造 的 一 款 矢量 绘图 应 用 软件 ， 该 软件 MAC 
平台 独占 ， 目 前 最 新 版 本 为 Sketch 3.9.1。Sketch 是 为 图 标 设计 和 界面 设计 而 生 的 设 
计 软 件 ， 因 此 在 Sketch 中 ， 几 乎 可 以 完成 UI 设计 的 全 部 工作 一 一 不 仅仅 是 设计 ， 
包括 后 期 的 切 图 和 标注 。 

需要 注意 的 是 ，Sketch 并 非 是 一 个 位 图 编辑 工具 ， 该 软件 无 法 对 图 片 进行 深度 
处 理 ， 如 果 需 要 大 量 位 图 的 UI 设计 ， 建 议和 Photoshop 配合 使 用 。 

Sketch 目前 只 有 英文 版 ， 在 本 教材 中 ， 会 提供 对 应 的 菜单 翻译 ， 并 且 建 议 大 家 
记 住 常用 的 快捷 键 。 

9.1.1 Sketch 的 安装 

Sketch 的 研发 团队 在 2015 年 12 月 宣布 退出 Mac App Store， 所 以 目前 下 载 安 装 
Sketch 的 唯一 途径 为 官网 下 载 安装 。 

Step01 打开 Sketch 的 官网 http://www.sketchapp.com/， 如 图 9.1 所 示 。 

















Professional digital design for Mac. 














Step02 单 击 Download Free Trial 按 钮 , 下 载 试 





MAC 中 ， 





Step03 执行 Sketch 的 应 


图 9.1 




















sketch.zip 


4 


Sketch 


图 9.2 





版 , Sketch 软件 仅 二 十 多 MB( 在 
1MB=1000KB) 。 下 载 sketch.zip 文件 后 ， 解 压 ， 得 到 图 9.2 所 示 文 件 。 




















程序 ， 完 成 安装 ， 




















文件 夹 ， 并 将 图 标 保 存在 桌面 Dock 上 。 
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通常 建议 将 此 文件 移动 到 应 











程序 





9.1.2 ”Sketch 的 界面 
打开 Sketch， 会 出 现 Sketch 的 欢迎 界面 ， 如 图 9.3 所 示 。 


Welcome to Sketch 


New to Sketch? Templates 


© open mwopocment [5 iOsDesignTemplate 
Read Manual 国 os conTenplae 
© conmasuppor 回 web Design Tomploe 


‘We're Social Newsletter 


( Pyviseo ©) 5 FoalowusonTwter bles 


[ie veonfacebook 。 Receivetipsandtrickaviaemail 





























sho me wneow wen skeen opens 
图 9.3 
在 该 界面 ， 左 侧 是 蓝 色 的 Play Video 〈 播 放 视频 ) 按钮 ， 单 击 可 跳 转 到 官网 查看 
Sketch 的 介绍 视频 。 


右 侧 一 共 分 成 四 部 分 ， 左 上 部 分 分 别 是 介绍 文档 、 用 户 指南 和 帮助 支持 ， 右 上 
部 分 分 别 是 iOS 设计 模板 、iOS 图 标 模 板 和 网 页 设计 模板 ， 左 下 部 分 是 Sketch 官网 
的 twitter 和 facebook 地 址 ， 右 下 部 分 可 以 输入 自己 的 电子 邮件 地 址 ， 获 取 Sketch 官 
方 不 定期 推送 的 最 新 消息 和 实用 技巧 。 

一 般 情 况 下 ， 在 该 界面 ， 直 接 单 击 右 下 角 的 OK 按钮 即 可 自动 创建 新 文档 进入 
软件 的 主 界面 。 

Sketch 的 主 界面 如 图 9.4 所 示 。 


Sketeh Fle Edk Insert Layer Type Amange Plugns View Wndow Help 
noe [> 











9.4 
Sketch 和 其 他 MAC 软件 类 似 ， 由 项 部 菜单 栏 和 主体 窗口 构成 。 


235 





项 部 菜单 栏 包含 Sketch 的 全 部 操作 命令 ， 从 左 往 右 分 别 是 Sketch、 文 件 、 编 辑 、 
插入 、 图 层 、 文 字 、 排 列 、 插 件 、 视 图 、 窗 口 和 帮助 。 








菜单 栏 往 下 是 工具 栏 ， 这 是 一 些 常用 工具 的 快捷 入 口 ， 工 具 栏 可 以 自 定义 ， 
包括 显示 类 型 〈 图 标 和 文字 、 图 标 大 小 、 仅 图 标 和 仅 文 字 ) 和 显示 的 工具 的 设置 。 
Sketch 的 默认 工具 栏 上 的 工具 从 左 往 右 分 别 是 插入 工具 、 编 组 工具 、 取 消 编组 工具 、 
创建 符号 工具 、 画 布 缩放 工具 、 编 辑 工具 、 变 形 工具 、 旋 转 工具 、 扁 平 化 工具 、 蒙 
板 工具 、 缩放 工具 、 布尔 运算 工具 (合并 、 减 去 顶层 、 保 留 相交 图 层 和 减 去 相交 图 层 ) 、 
上 移 图 层 工具 、 下 移 图 层 工具 、Sketch 镜像 、 分 享 工 具 、 视 图 工具 和 导出 工具 。 
工具 栏 的 下 方 分 成 左 、 中 、 右 3 个 部 分 ， 左 侧 是 图 层 列表 ， 用 于 对 画布 、 画 板 
和 图 层 的 管理 ， 右 侧 是 检查 器 ， 用 于 设置 图 层 的 各 种 属性 等 。 中 间 是 画布 ， 所 有 的 
设计 都 在 此 处 进行 。 

关于 Sketch 的 具体 功能 ， 笔 者 建议 结合 实例 进行 学 习 。 


9.1.3 ”Sketch 工具 栏 的 自 定义 
Step01 将 鼠标 移动 至 工具 栏 区 域 ， 右 击 ， 弹 出 如 图 9.5 所 示 的 菜单 。 
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9.5 


Step02 菜单 上 的 内 容 从 上 至 下 分 别 是 显示 图 标 和 文字 、 仅 显示 图 标 、 仅 显示 
文字 、 隐 藏 工具 栏 、 使 用 小 尺寸 图 标 和 自 定义 工具 栏 ， 其 中 隐藏 工具 栏 的 快捷 键 
为 command+option+T， 要 对 工具 栏 的 内 容 进行 自 定义 ， 选 择 最 后 一 项 “Customize 
Toolbar…”， 弹 出 如 图 9.6 所 示 的 对 话 框 。 
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图 9.6 





Step03 在 该 对 话 框 中 可 以 看 到 Sketch 中 可 以 放 到 工具 栏 上 的 所 有 工具 ， 要 将 该 
对 话 框 中 的 工具 放置 在 工具 栏 中 ， 只 需要 用 鼠标 选中 该 工具 ， 然 后 按 住 并 拖 动 到 工 
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具 栏 松 开 即 可 。 如 果 要 将 工具 栏 上 的 工具 删除 ， 只 需 选中 需要 删除 的 工具 ， 按 住 并 
拖 动 到 工具 栏 之 外 即 可 。 调 整 完成 后 ， 单 击 右 下 角 的 Done 按钮 ， 即 可 完成 工具 栏 的 
自 定义 。 


9.1.4 ”Sketch 的 快捷 键 及 自 定义 快捷 键 的 方法 


Sketch 对 绝 大 部 分 操作 都 设置 了 快捷 键 ， 使 用 快捷 键 进 行 设计 能 极 大 地 提升 设 
计 效 率 ， 对 于 常用 的 快捷 键 建议 记 住 一 一 无 需 刻意 去 记 ， 在 使 用 Sketch 进行 设计 时 
养 成 使 用 快捷 键 的 习惯 ， 几 次 之 后 自然 就 记 住 了 。 

表 9.1 一 表 9.7 所 示 ， 为 Sketch 中 常见 的 快捷 键 ， 快 捷 键 中 command 键 、option 
键 和 control 键 对 应 的 是 苹果 键盘 上 的 键 。 

















表 9.1 
插入 相关 的 快捷 键 
新 建 画 板 A 
切片 工具 S 
和 拢 形 工具 R 
圆 角 矩形 工具 U 
椭圆 工具 O 
直线 工具 L 
钢笔 工具 V 
铅笔 工具 P 
文本 工具 T 
表 9.2 
文本 相关 的 快捷 键 
粗 体 工 command +B 
斜体 command +I 
下 画 线 command + TU 
增 大 字号 option + command + 十 
减 小 字号 option + command + - 


增加 字符 间隙 〈 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 ) 
减 小 字符 间隙 〈 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 ) 
更 改 字体 

将 文本 转化 为 轮廓 〈 转 曲 ) 

文本 左 对 齐 〈 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 
文本 居中 对 齐 〈 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 ) 
文本 右 对齐 〈 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 
特殊 字符 〔 该 快捷 键 需要 在 文本 编辑 状态 下 使 用 ) 


option + control +L 





option + control 十 了 





command +T 





shift + command+ O 


command + shift + { 





command + shi 全 十 | 








command + shift + } 








control + command + 空格 
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表 9.3 


















































画布 视图 相关 的 快捷 键 
放大 画布 command 十 十 
缩小 画布 command + - 
实际 尺寸 查看 command + 0 
在 画布 中 央 显 示 所 有 画板 command + 1 
缩放 选中 图 层 command 十 2 
中 心 显示 选中 图 层 command + 3 
激活 检查 器 属性 输入 框 ( 默 认 第 一 个 输入 框 ， 再 次 按 、 
下 切换 到 下 一 个 ) oto 
显示 /隐藏 标尺 control + 及 
显示 /隐藏 网 格 线 control + G 
显示 / 隐藏 栅 格 层 control + 工 
进入 /退出 像素 视图 模式 control + 了 
显示 / 隐藏 选取 手柄 control +H 
显示 /隐藏 像素 网 格 control+X 
移动 画布 空格 键 + 按 下 鼠标 拖 电 
表 9.4 
Sketch 窗口 相关 的 快捷 键 
Sketch 窗口 切换 command + 一 
显示 / 隐藏 图 层面 板 option + command + 1 
显示 / 隐藏 检查 器 面板 option + command + 2 
同时 显示 / 隐藏 图 层 和 检查 器 面板 option + command + 3 
显示 /隐藏 工具 栏 option + command +T 
进入 /退出 演示 模式 command + . 
进入 /退出 全 屏 模式 control + command +F 
表 9.5 
形状 相关 的 快捷 键 
保持 当前 选中 option + command 
将 当前 图 层 设置 为 蒙 版 control + command + M 





合并 形状 布尔 运算 ) 





减 去 顶层 形状 (布尔 运算 ) 


option + command+U 


option + command + S 





保留 重 倒 部 分 形状 《布尔 运算 ) 


option + command +I 
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续 表 




















形状 相关 的 快捷 键 
减 去 重 又 部 分 形状 〈 布 尔 运算 ) option + command 十 入 
改变 选中 图 层 尺寸 command + 方向 键 
以 10 为 单位 改变 选中 图 层 尺寸 shift+ command + 方向 键 
改变 曲柄 状态 一 一 直线 角形 状 编辑 模式 下 ) 1 
改变 曲柄 状态 一 一 镜像 曲柄 〈 形 状 编辑 模式 下 2 
改变 曲柄 状态 一 一 非 连续 对 称 曲柄 〈 形 状 编辑 模式 下 ) 3 
改变 曲柄 状态 一 一 非 对称 曲 柄 〈 形 状 编辑 模式 下 ) 4 

表 9.6 

图 层 相关 的 快捷 键 
显示 选中 图 层 与 其 他 图 层 距离 按 住 option 
显示 选中 图 层 与 图 层 组 内 图 层 距离 按 住 option + command 
复制 图 层 按 住 option + 按 下 鼠标 拖 抽 (或 者 command+D) 
复制 图 层 样式 option + command + C 
粘贴 图 层 样式 option + command +V 
拾 色 器 control+ C 
变形 工具 command + shi 伍 十 工 
旋转 工具 command + shift + R 
显示 /取消 颜色 填充 F 
显示 /隐藏 描 边 B 


表 9.7 


图 层 、 图 层 组 和 画板 排列 等 相关 的 快捷 键 























将 图 层 上 移 一 层 option + command + 上 方向 键 

将 图 层 移 到 顶层 control + option + command + 上 方向 键 
将 图 层 下 移 一 层 option + command + 下 方向 键 

将 图 层 移 到 底层 control + option + command + 下 方向 键 
隐藏 图 层 shift + command +H 

锁定 图 层 shift + command + 工 

重 命名 图 层 command +R 

将 图 层 编组 command + G 

解散 图 层 编 组 shift+ command + G 








选择 上 一 个 图 层 





shift + tab 
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续 表 


图 层 、 图 层 组 和 画板 排列 等 相关 的 快捷 键 




















选择 下 一 个 图 层 tab 
选择 父 级 画板 esc 
搜索 图 层 command +F 
选择 上 一 页 画布 和 + 上 方向 键 
选择 下 一 页 画布 血 + 下 方向 键 


除了 系统 自 带 的 快捷 键 ， 也 可 以 自 定义 快捷 键 ，Sketch 的 快捷 键 的 添加 和 大 部 
分 MAC 程序 一 样 ， 需 要 打开 应 用 程序 中 的 系统 偏好 设置 ， 然 后 选择 “键盘 > 快捷 
键 > 应 用 程序 快捷 键 ” 命 令 。 单 击 下 方 的 “+” 按 钮 ， 如 图 9.7 所 示 。 








一 
可 
全 键盘 控制 : 在 窗口 和 对 话 框 中 ， 按 下 Tab 键 在 以 下 控制 之 间 移 动 键盘 焦点 : 
。 仅 文本 框 和 列表 
“所 有 控制 
按 下 Control+F7 来 更 改 此 设置 、 


图 9.7 


然后 从 弹出 的 菜单 中 选择 Sketch， 从 Sketch 的 菜单 中 输入 准确 的 菜单 名 ， 再 在 
键盘 快捷 键 处 按 下 需要 设置 的 快捷 键 ， 单 击 “ 添 加 ”按钮 即 可。 





@ 9.2 Sketch 小 试 牛刀 一 一 界面 


经 过 上 一 节 的 学 习 ， 相 信 大 家 已 经 对 Sketch 有 所 了 解 ， 本 节 将 向 大 家 介绍 如 何 
使 用 Sketch 进行 UI 界面 的 设计 ， 大 家 将 深入 了 解 Sketch 的 图 层面 板 、 检 查 器 面板 
和 画布 的 使 用 方法 。 
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在 用 Sketch 进行 UI 设计 之 前 ， 建 议 大 家 阅读 以 下 几 篇 文档 。 

(1) i0S 人 机 交互 指南 (https://developer.apple.com/library/IOS/documentation/ 
userexperience/conceptual/mobilehig/index.html#//apple_ref/doc/uid/TP40006556-CH66- 
SW1) 。 

(中 文 版 http://wikijikexueyuan.com/project/IOS-human-interface-guidelines/) 

(2) Material Design 设计 规范 (http://www.google.com/design/spec/material-design/》 。 

《中文 版 : http://wiki.jikexueyuan.com/project/material-design/) 

上 述 中 文 版 由 “ 极 客 学 院 ” 进 行 翻译 , 并 非 官方 提供 ， 所 以 会 存在 一 定 的 滞后 性 ， 
建议 无 英文 阅读 障碍 的 读者 直接 阅读 英文 版 。 该 文档 会 随 着 系统 的 迭代 更 新 而 更 新 ， 
建议 大 家 持续 关注 。 


9.2.1 ”新建 画 布 


Step01 打开 Sketch 后 ， 使 用 快捷 键 A 新 建 画 布 。 在 右 侧 的 检查 器 中 可 以 看 到 系 
统 已 经 内 置 了 常用 的 尺寸 ， 单 击 选中 需要 创建 的 画布 大 小 即 可 完成 画布 的 新 建 ， 如 
9.8 所 示 。 


iphone 6 


ipad Pro Portrait 1024x1366px 
ipad Pro Landscape 1366x1024px 





ipad Portrait 768x1024px 
ipad Landscape 1024x768px 
iphone 6 Plus 414x736px 
iphone 6 375x667px 


iphone 5/5S/5C 320x568px 

Apple Watch 42mm 。 312x390px 

Apple Watch 38mm ”272x340px 
Responsive Web Design 


























Desktop HD 1440x1024px 
Desktop 1024x1024px 
Tablet Portrait 768x1024px 
Mobile Portrait 320x1024px 

关 Material Design 

iosicons 

Android icons 

acicons 

PtvOS Icons 

Pp paner Sizns 








图 9.8 


Step02 如 果 需 要 创建 自 定义 大 小 的 画布 ， 单 机 右 侧 检查 器 右 下 方 的 “+” 按 钮 ， 
在 弹出 的 对 话 框 中 输入 需要 定义 画布 的 名 称 以 及 尺寸 即 可 ， 尺 寸 格式 为 长 X 宽 ， 如 
9.9 和 图 9.10 所 示 。 
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Around Selection 1361x778px 








ipad Portrait 768x1024px 
ipad Landscape 1024x763px 
iphone 6 Plus 414x736px 
iphone 6 375x667px 
iphone 5/5S/5C ~ 320x569px 
Apple Watch 42mm 。 312x390px 
Apple Watch 38mm 272x340px 





i 


中 三 | 三 宣 二 








ipad Portrait 768x1024px 
ipad Landscape = 1024x768px 
iphone 6 Plus 414x736px 
iphone 6 375x667px 
iphone 5/5S/5C 320x568px 
Apple Watch 42mm 。 312x390px 


Apple Watch 38mm 。 272x340px 


























Responsive Web Design 
| Desktop HD 1440x1024px i 
Desktop 1024x1024px ee noes 
Tablet portrait = C&C768x1024 Wi Height 
QQ Cancel | OK 
图 9.9 图 9.10 


大 家 一 定 注意 到 ， 在 所 有 的 尺寸 中 ， 比 如 iOS 的 尺寸 ， 以 iPhone 6 为 例 ， 给 出 
的 是 375X667px。 但 是 实际 中 ，iPhone 6 的 分 辨 率 为 750X1334px。 这 是 因为 Sketch 
从 3.3.2 版 本 之 后 的 一 个 变动 一 一 采用 单 倍 尺寸 设计 。 

那么 为 什么 会 用 单 倍 尺寸 设计 呢 ?” 这 是 因为 在 编程 的 过 程 中 ， 程 序 员 是 用 单 倍 
尺寸 进行 编程 的 。 

我 们 知道 ， 在 iPhone 上 ， 在 给 retina 屏幕 进行 切 图 时 ， 导 出 图 片 的 命名 是 @2X 
结尾 ， 而 在 iPhone 6 Plus 上 是 用 的 @3X 结尾 。@2X 的 意思 是 2 倍 。 另 外 ， 在 PS 
中 ， 我 们 设计 iPhone 6 的 尺寸 为 750X 1334px， 根 据 设计 规范 ， 一 般 认 为 最 小 字体 为 
20px, 但 是 程序 员 编 程 时 , 这 个 字体 为 20/2=10px。 也 就 是 说 , 如果 按照 实际 分 辨 率 设 计 ， 
字体 大 小 交 给 程序 时 ， 程 序 需要 在 此 基础 上 除 以 倍数 进行 编程 。 这 样 实际 上 增加 了 
沟通 成 本 。 

Sketch 是 矢量 设计 软件 ， 使 用 单 倍 设计 后 ， 可 以 导出 任意 大 小 的 图 片 。 这 一 点 
也 充分 体现 了 Sketch 在 UI 设计 上 的 优势 。 

新 建 完 画布 后 ， 在 灰色 的 面板 上 会 出 现 白色 的 画布 ， 一 般 刚 创建 的 画布 我 们 会 
做 两 个 基本 的 操作 一 一 调整 到 合适 的 显示 大 小 以 及 对 画布 命 

和 PS 一 样 ， 使 用 快捷 键 command + +/- 进行 画布 的 显示 缩放 ， 根 据 屏幕 的 大 小 
将 其 缩放 到 合适 的 大 小 。 

Step03 Sketch 的 一 个 文件 中 可 以 创建 无 数 的 画布 ， 我 们 按 快捷 键 A， 再 次 新 建 
一 个 画布 后 ， 使 用 快捷 键 controlHR， 打 开标 尺 ， 可 以 看 到 无 论 选择 哪个 画布 ， 标 尺 
上 面 都 会 从 0 开始 ， 如 图 9.11 所 示 。 

对 于 使 用 Magic Mouse 的 用 户 ， 可 以 让 鼠标 在 画布 区 域 后 ， 用 一 个 手指 滑动 鼠 
标 来 调整 画布 在 屏幕 中 的 显示 位 置 ， 注 意 是 显示 位 置 而 非 真 正 移动 画布 。 如 果 使 用 
的 是 触 控 板 ， 可 以 两 个 手指 同时 滑动 触 控 板 以 达到 同样 的 目的 。 
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9.11 


9.2.2 ”图 层 列 表面 板 的 使 用 


Step01 双击 右 侧 的 图 层面 板 中 的 画布 名 ， 可 快速 进入 编辑 模式 ， 输 入 画布 名 后 ， 


按 回 车 键 确认 , 或 者 在 其 他 任意 区 域 单 击 即 可 完成 对 图 层 的 重 命名 ， 如 图 9.12 所 示 。 


ee 























图 9.12 
重 命名 的 好 处 ， 一 个 是 方便 自己 快速 定位 对 应 图 层 ， 另 一 个 是 Sketch 在 导出 图 





层 的 时 候 , 默认 使 用 的 是 图 层 名 , 取 一 个 有 意义 的 名 字 , 会 极 大 地 节省 后 期 维护 成 本 ， 
提高 沟通 效率 。 


Sketch 内 置 了 iOS 和 Material Design 的 UI 设计 规范 模板 ， 在 作 移动 端的 UI 设 


计时 ， 一 般 会 在 设计 稿 中 插入 系统 顶部 的 信号 栏 ， 一 方面 可 以 让 画面 更 接近 真实 ， 





另 一 方面 因为 信号 栏 也 有 一 定 的 高 度 ， 加 入 信号 栏 后 能 更 准确 地 进行 设计 。 

















Step02 在 Sketch 的 图 层面 板 中 ， 单 击 某 个 画布 名 ， 便 可 选中 该 画布 。 选 中 需要 
0 信号 栏 的 画布 后 ， 选 择 “File>New from Template>iOS UI Design 《文件 > 从 模 








板 


ph 新 建 >IOS UI 设计) ”命令 ， 可 打开 iOS 的 UI 设计 规范 模板 ， 如 图 9.13 所 示 。 
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图 9.13 


Step03 直接 在 画布 上 单 击 选 中 需要 选择 的 内 容 ， 注 意 在 图 层 列表 中 也 同样 会 选 
中 对 应 图 层 组 名 。 大 家 注意 到 ， 在 列表 中 用 蓝 色 和 紫色 两 种 颜色 来 进行 显示 ， 其 中 
紫色 的 是 模板 图 层 ， 蓝 色 的 是 普通 图 层 。 

Step04 使 用 快捷 键 command+C 进行 复制 ， 快 捷 键 command+V 进行 粘贴 ， 图 层 
面板 如 图 9.14 所 示 。 出 现 名 为 Status Bar Black (黑色 状态 栏 ) 的 文件 夹 名 ， 单 击 文 
件 夹 名 左 侧 的 箭头 可 显示 该 组 的 图 层 列表 ， 如 图 9.14 所 示 。 

Step05 在 紫色 图 层 名 上 右 击 ， 在 弹出 的 快捷 菜单 中 单 击 Detach from Symbol (从 
符号 中 分 离 ) 选 项， 即 可 将 模板 图 层 转 化 为 普通 图 层 ， 如 图 9.15 所 示 。 


™Y iphone 6 


941TAM 





Detach from Symbol 
lgnore Uncerlying Mask 








图 9.14 图 9.15 


Step06 我 们 注意 到 ， 在 图 层 列表 中 ， 第 一 排 是 一 个 箭头 、 缩 略图 和 图 层 名 。 箭 
头 表示 可 以 展开 ， 展 开 后 发 现 展 开 的 图 层 右 侧 有 图 9.16 所 示 的 标志 ， 这 是 表示 这 个 
图 层 组 是 经 过 布尔 运算 得 来 的 〈 关 于 布尔 运算 ， 请 看 9.3.1 小 节 ) 。 

Step07 在 图 层 列 表 中 ， 图 层 缩 略 图 为 加 的 表示 该 图 层 是 文字 图 层 。 选 中 该 图 层 ， 
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按键 盘 上 的 
所 示 。 


车 键 即 可 编辑 文字 。 被 选中 可 编辑 的 文字 会 呈 蓝 色 高 亮 显示 ， 如 图 9.17 

















Aa 9:41AM 


图 9.16 图 9.17 


Step08 在 该 图 层 列表 的 最 后 一 个 图 层 ， 注 意 到 在 图 层 右 侧 有 个 眼睛 的 图 标 ， 而 
鼠标 移动 在 任何 一 个 图 层 ， 右 侧 也 会 出 现 该 图 标 ， 这 是 图 层 的 显示 / 隐藏 功能 。 把 鼠 
标 移 动 到 需要 隐藏 的 图 层 或 图 层 组 ， 右 侧 出 现 眼睛 图 标 ， 单 击 该 图 标 ， 即 可 隐藏 该 
图 层 或 图 层 组 ， 隐 藏 状态 的 图 层 或 图 层 组 右 侧 的 眼睛 图 标 常 亮 显 示 ， 图 层 或 图 层 名 
变 至 灰色 状态 ， 如 图 9.18 所 示 。 

Step09 在 图 层 中 ， 按 住 command 键 单 击 图 层 名 ， 可 以 选择 多 个 图 层 ， 按 住 Shift 
键 ， 可 以 连 选 多 个 图 层 。 选 中 多 个 图 层 后 ， 右 击 ， 选 择 Group Selection 〈 组 选择 ) ， 
或 者 按 快 捷 键 command+G 可 进行 编组 。 在 图 层 组 处 右 击 ， 选 择 Ungroup〈 解 组 ) ， 
或 者 按 快捷 键 command+Shift+G 可 释放 编组 ， 如 图 9.19 所 示 。 
| | 


Pb DO Battery Cut 








Aa 100% P h 


Aa 9:41 AM Duplicate 
Delete 


Forward 
”Backward 
“ Ml Status Bar Black iPhone 6 


es a Copy Style 





A3 100% 

M3 9:41AM 

上 wifi 

Aa Carrier 
”一 Mobile Signal 


= | 


图 9.18 图 9.19 


Step10 在 图 层 列 表 的 上 方 ， 有 图 9.20 所 示 的 按钮 。 
Step1l1 单 击 该 按钮 ， 展 开 画 布 列表 。 在 Sketch 中 ， 不 仅 画 布 上 的 图 层 是 可 以 无 
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限 多 的 ， 画 布 本 身 也 可 以 是 无 限 多 的 。 一 般 在 实际 工作 中 ， 为 了 便于 图 层 管理 ， 经 
常 把 同一 个 模块 功能 的 界面 设计 放 在 一 个 画布 ， 单 击 展 开 后 图 层 右 上 方 的 “+” 按 钮 
即 可 新 建 画布 ， 如 图 9.21 所 示 。 


(人 Insert Group Ungroup Cre 
s 








Pages 
™ iPhone 6 
加 四 Status Bar Black iPhone 6 page1 ao lig 
age 
Vb DD Battery | ie | 
用 Pb iphone 6 Conv 


图 9.20 图 9.21 


Step12 如 图 9.22 所 示 , 新 建 的 画布 系统 会 默认 画布 名 为 Page xx。 单 击 选中 画布 ， 
在 画布 名 上 双击 即 可 快速 重 命名 画布 。 
Step13 画布 编辑 好 后 ， 单 击 如 图 9.23 所 示 区 域 ， 即 可 退出 画布 编辑 。 














™ iphone6 
图 9.22 图 9.23 
Step14 如 果 不 止 一 个 画布 ， 在 图 层 左上 方 。 田 " ws WY 
会 出 现 一 个 下 拉 箭 头 ， 表 示 有 多 个 画布 ， 单 击 0 
该 区 域 即 可 快速 切换 当前 画布 ,如 图 9.24 所 示 。 remo co 
在 图 层面 板 的 下 方 ,分 别 是 图 层 搜索 功能 、 一 Rare 
锁定 图 层 功能 和 锁定 切片 功能 。 i 
在 搜索 功能 处 单 击 ， 输 入 图 层 名 ， 即 可 快 gatery 
速 查找 包含 该 图 层 名 的 图 层 。 而 单 击 品 按钮， Ra ran 
即 可 锁定 当前 画布 的 所 有 图 层 ， 此 时 图 层 列表 图 924 





中 图 层 和 图 层 组 收 起 。 类 似 于 PS 或 者 AI 中 的 
锁 住 图 层 功能 。 而 第 三 个 按钮 的 切片 功能 ， 和 锁定 图 层 功 能 类 似 ， 只 是 作用 的 对 象 
为 当前 画布 的 切片 (关于 切片 ， 请 看 第 9.5 节 》。 
到 现在 为 止 ，Sketch 的 图 层面 板 的 基本 功能 已 经 学 习 完毕 ， 在 本 节 中 ， 我 们 学 
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习 了 如 何 导 入 系统 内 置 模板 ， 以 及 图 层面 板 的 基本 操作 。 在 实际 工作 中 ， 图 层面 板 
功能 不 是 一 个 独立 存在 的 功能 ， 需 要 和 其 他 各 个 部 分 联系 在 一 起 。 


9.2.3 ”检查 器 面板 的 使 用 


如 果 说 图 层 列表 面板 中 的 内 容 决定 了 界面 中 有 什么 内 容 ， 那 么 可 以 说 检查 器 面 
板 决定 了 这 些 内 容 长 什么 样 。 本 节 将 带 大 家 来 深入 了 解 Sketch 的 检查 器 的 内 容 和 使 
用 方法 ，Sketch 的 检查 器 的 内 容 会 根据 图 层 类 型 的 不 同 有 所 差异 。 


1. 图 层 组 的 检查 器 
Step01 选中 某 一 图 层 组 ， 可 以 看 到 右 侧 的 检查 器 呈现 如 图 9.25 所 示 的 内 容 。 
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9.25 


最 上 面 一 排 是 对 齐 工具 , 从 左 到 右 分 别 是 左右 分 布 对 齐 、 上 下 分 布 对 齐 、 左 对 齐 、 
垂直 居中 对 齐 、 右 对 齐 、 上 对 齐 、 水 平 居 中 对 齐 和 下 对 齐 。 

左边 第 一 、 第 二 个 对 齐 方 式 需要 3 个 或 3 个 以 上 图 层 或 图 层 组 被 选中 后 才 可 用 ， 
而 其 他 对 齐 方式 , 如 果 只 选中 了 一 个 图 层 或 一 个 图 层 组 , 则 对 齐 对 象 为 当前 界面 本 身 。 

在 需要 执行 对 齐 操作 的 时 候 ， 使 用 对 齐 功 能 ， 一 方面 能 快速 对 齐 对 象 ， 另 一 方 
面相 比 手动 对 齐 更 加 准确 。 

Step02 我 们 知道 信号 栏 一 般 位 于 界面 顶部 ， 单 击 “ 上 对 齐 ”， 将 信号 栏 快速 移 
动 到 界面 顶端 。 如 图 9.26 所 示 。 

在 信号 栏 对 齐 的 同时 ， 对 齐 按钮 下 方 的 Position (位置 ) 处 的 数值 发 生 了 变化 。 
此 处 是 精确 定位 ， 前 面 站 为 水 平方 向 ， 从 最 左 侧 起 为 0， 到 最 右 侧 。 后 面 的 数字 了 
为 垂直 方向 ， 从 顶部 起 为 0， 到 最 下 方 。 

在 位 置 处 往 下 看 是 Size (尺寸 ) 。 这 里 尺寸 指 选中 图 层 或 者 图 层 组 的 尺寸 ， 前 
面 的 数字 为 宽度 ， 后 面 的 数字 为 高 度 ， 单 位 为 px。 在 宽 和 高 的 中 间 有 一 个 划 图 标 ， 
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单 击 可 以 切换 锁定 长 宽 比 状态 ， 


即 改变 任意 数值 是 否 等 比 缩放 。 因 为 未 锁定 ， 变 更 宽 
或 者 高 的 时 候 另 一 数值 不 发 生 改变 ; 国 为 锁定 状态 ， 变 更 宽 或 者 高 的 时 候 另 一 数值 等 
































比 发 生变 化 。 
| = 
RE Position 7 i Dm 
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Cm 全 
DD eho moven wen soiecing 
No Symbol 六 
Opacity 一 一 一 一 |100% | 
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= 和 
图 9.26 
在 尺寸 下 方 是 Transform 〈 变 换 ) ， 可 以 直接 输入 变换 的 度数 ， 将 图 层 旋转 ， 正 


数 为 顺 时 针 方 向 旋转 ， 负 数 为 逆 时 针 方向 旋转 。 数 值 输入 框 右 侧 两 个 按钮 分 别 表示 


水 平 翻 转 和 垂直 反 转 。 


需要 注意 的 是 , 在 Sketch 中 所 有 的 属性 面板 的 数值 输入 框 中 , 鼠标 移动 到 输入 框 ， 
输入 框 的 右 侧 将 出 现 上 下 箭头 ， 单 击 箭头 可 以 每 次 变更 1 单位 的 数值 。 或 者 可 以 单 


击 输入 框 直接 输入 数值 。 


Step03 如 图 9.27 所 示 ， 在 Sketch 的 属性 面板 的 输入 框 中 ， 可 以 做 简单 的 运算 ， 
在 输入 减法 后 按 下 回 车 键 , 即 可 算出 减法 的 结果 并 调整 至 相应 大 小 。 支持 加 法 、 减法 、 
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在 Sketch 中 ， 我 们 在 画布 中 单 击 某 一 图 层 ， 如 果 该 图 层 在 某 一 图 层 组 的 操作 ， 
直接 选中 的 是 该 图 层 组 而 非 该 图 层 ， 如 果 有 大 量 需要 直接 选中 图 层 本 身 而 非 图 层 组 ， 


则 可 勾 选 Click-through when selecting( 选 择 时 单 击 )。 义 先后 , 再 次 单 击 画布 上 的 
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己 


云 ， 














则 直接 选中 该 图 层 而 非 该 图 层 组 ， 这 时 候 如 需 选中 图 层 组 ， 只 能 在 图 层面 板 中 选择 。 
值得 注意 的 是 ， 除 非 这 一 需求 非常 频繁 ， 笔 者 建议 一 般 不 勾 选 该 功能 。 如 需 选 
择 图 层 组 中 的 某 一 图 层 ，Sketch 也 提供 有 快捷 方式 ， 按 住 command 键 并 单 击 ， 即 可 
快速 选中 图 层 组 中 的 图 层 。 
Step04 再 往 下 是 样式 模板 ， 因 为 我 们 之 前 已 经 把 模板 图 层 变 成 普通 图 层 ， 所 以 
此 处 状态 是 No Symbol (无 样式 模板 ) 。 单 击 会 出 现下 拉 列 表 ， 分 别 是 该 Sketch 文 
件 中 有 的 样式 列表 、 创 建新 样式 和 编辑 样式 ， 如 图 9.28 所 示 。 
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9.28 


Step05 在 样式 下 方 是 透明 度 , 可 以 通过 拉杆 左右 快速 调节 透明 度 , 0 为 完全 透明 ， 
100% 为 完全 不 透明 。 也 可 以 直接 输入 数值 精确 设置 透明 度 。 和 PS 一 样 ， 也 可 以 在 
选中 需要 设置 透明 度 的 图 层 或 者 图 层 组 ， 通 过 直接 按 下 键盘 上 的 0 ~ 9 数字 键 快速 
设置 透明 度 。 

Step06 透明 度 的 下 方 是 图 层 的 混合 样式 , 类 似 于 PS 中 的 图 层 样式 中 的 混合 模式 ， 
默认 无 混合 样式 ， 即 Normal 普通) 。 单 击 出 现下 拉 菜 单 ， 分 别 为 Darken 〈 加 深 ) 、 
Multiply (正片 番 底 ) 、Color Burn (颜色 加 深 ) ， 这 3 个 为 变 深 效果 。Lighten( 减 淡 ) 、 
Screen 〈 滤 色 ) 、Color Dodge〔 颜 色 减 淡 ) ， 这 3 个 为 变 淡 效果 。Overlay( 受 加 〉、 
Soft Light( 柔 光 )、Hard Light( 强 光 ), 这 3 个 为 饱和 度 的 调整 效果 。Difference ( 差 值 )、 
Exclusion (排除) ,这 两 个 为 差 集 效果 。 Hue (色相 ) 、Saturation (饱和 度 ) 、Color ( 颜 
色 ) 、Luminosity (明度 ), 这 4 个 为 颜色 调整 效果 。 建议 大 家 在 实际 操作 中 分 别 设置 ， 
以 查看 各 效果 有 什么 区 别 ， 因 为 该 处 的 混合 样式 和 PS 中 类 似 ， 在 此 不 做 过 多 介绍 ， 
如 图 9.29 所 示 。 

再 往 下 ， 则 是 Shadows (投影 ) 属性 ， 单 击 右 侧 的 十 , 可 以 为 图 层 添 加 投影 效果 。 

系统 已 经 给 出 了 默认 投影 ， 我 们 可 以 对 其 进行 修改 。 在 Sketch 中 ， 只 能 给 图 层 
组 设置 唯一 投影 样式 ， 但 是 对 于 图 层 ， 可 以 多 个 投影 效果 又 加 。 

在 投影 属性 中 ， 左 侧 的 勾 选 代表 应 用 该 投影 效果 ， 取 消 勾 选 ， 则 取消 该 效果 。 
单 击 第 二 个 Color 颜色 ) ， 出 现 调 色 盘 ， 可 以 对 投影 的 颜色 进行 调整 。 关 于 Sketch 
的 颜色 设置 请 查看 第 9.2.4 小 节 。 
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9.29 


Step07 设置 好 颜色 后 ， 后 面 的 四 个 值 分 别 是 投影 的 水 平 位 置 、 垂 直 位 置 、 投 影 
模糊 度 和 投影 范围 。 大 家 可 以 试 着 任意 调整 相关 数值 去 感受 ， 值 得 注意 的 是 ， 在 图 
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2. 形状 图 层 的 检查 器 
Step01 单 击 里 面 的 形状 图 层 ， 如 电池 标 ， 会 看 到 右 侧 属性 面板 变 成 图 9.31 所 示 
的 状态 。 
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图 9.31 


250 





Step02 对 比 图 层 组 ， 在 Transform 〈 变 换 ) 下 面 多 了 一 个 Radius 〈 半 径 ) 选项 。 
这 一 属性 在 圆 角 矩形 中 用 得 比较 多 ， 改 变数 值 大 小 可 以 调整 圆 角 移 形 的 圆 角 大 小 ， 
数值 越 大 ， 圆 角 抑 形 的 角度 越 大 。 

Step03 另外 , 在 混合 样式 下 , 多 了 Fills( 填 充 )、 Borders( 描 边 )、Inner Shadows( 内 
阴影 ) 和 Gaussian Blur 〈 高 斯 模糊 ) 等 属性 。 

Step04 Sketch 允许 各 个 图 层 的 多 个 样式 混合 ， 所 以 在 Fills (填充) 中 ， 单 击 右 侧 
的 二 癌 以 将 多 个 填充 样式 到 加 (在 各 填充 透明 度 不 为 100% 时 起 作用 ), 如 图 9.32 所 示 。 
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9.32 


Fills (填充) 效果 的 属性 ， 从 左 到 右 分 别 是 应 用 该 效果 勾 选 、 填 充 颜 色 设置 、 
填充 混合 样式 和 透明 度 。 

Step05 Borders( 描 边 ) 效果 的 属性 ， 从 左 到 右 分 别 是 应 用 该 效果 的 勾 选 、 颜 色 、 
描 边 位 置 和 描 边 粗 细 。 其 中 描 边 位 置 分 别 是 Center( 居 中) 、Inside( 内 部 描 边 ) 和 
Outside〔 外 描 边 ) 。 描 边 的 右 方 有 竞 按 钮 ， 单 击 该 按钮 ， 出 现 图 9.33 所 示 界 面 。 








h 合 :41AM 100%4 


























图 9.33 
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第 一 排 分 别 是 描 边 端点 的 样式 、 描 边 合并 的 样式 。 下 方 是 设置 描 边 开始 箭头 样 
式 和 描 边 结束 箭头 ， 下 方 4 个 输入 框 通过 输入 不 同 的 数值 可 以 绘制 出 虚线 等 效果 。 
分 别 代 表 Dash (虚线 ) 、Gap( 间 隙 ) ， 单 位 为 px。Sketch 中 人 允许 同一 条 虚线 有 两 
种 样式 ， 比 如 设置 数值 分 别 为 2.1.4、2， 则 表示 这 条 虚线 是 由 一 个 2 像素 的 线段 、1 
像素 的 间隔 、4 像素 的 线段 和 2 像素 的 间隔 为 一 组 组 成 的 。 实 际 工作 中 ， 如 果 组 成 虚 
线 的 线段 保持 一 致 ， 则 任意 填写 前 面 两 个 或 者 后 面 两 个 输入 框 中 的 数值 即 可 。 

Inner Shadow 〈 内 阴影 ) 的 属性 和 投影 的 属性 类 似 ， 不 做 过 多 介绍 。 

Gaussian Blur 〈 高 斯 模糊 ) 这 一 功能 在 10S7 后 多 用 于 制作 毛 玻璃 透明 效果 ， 单 





击 该 处 可 以 选择 模糊 效果 ， 分 别 是 高 斯 模糊 、 动 态 AR z 
模糊 、 缩 放 模 糊 和 背景 模糊 。 选 择 需要 设置 的 模糊 es ow | 
效果 类 型 ， 勾 选 右边 的 选项 框 ， 即 可 设置 模糊 效果 。 Ea 0 cm 
模糊 效果 属性 第 一 排 为 模糊 值 ， 第 二 排 为 模糊 角度 一 一 一 一 
的 设置 ， 如 图 9.34 所 示 。 图 9.34 

3. 文字 图 层 的 检查 器 


选中 任 一 文字 图 层 ， 右 侧 检查 器 中 属性 值 变化 如 图 9.35 所 示 。 

在 样式 模板 下 方 出 现 了 和 其 他 软件 文字 属性 类 似 的 属性 设置 。 

Typeface( 字 体 ) 。 可 以 设置 字体 。 

Weight (权重 ) 。 可 以 设置 该 字体 中 的 字体 粗细 、 和 斜体 等 。 需 要 注意 的 是 ， 不 
是 所 有 的 字体 都 有 该 属性 可 以 调整 。 

Weight (权重 ) 下 方 的 齿轮 图 标 按钮 可 以 设置 下 划 线 等 样式 和 文字 列表 样式 ， 
如 图 9.36 所 示 ， 该 按钮 右 侧 分 别 是 字体 颜色 和 字体 大 小 。 
















































































图 9.35 
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再 往 下 是 段落 对 齐 ， 分 别 是 左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。 








Width〈 宽 度 ) 为 段落 文本 宽度 设置 ， 分 别 是 自动 调整 和 固定 宽度 。 这 一 功能 在 


进行 段落 界面 设计 的 时 候 用 得 比较 多 ， 自 动 调整 表示 随 着 输入 的 文本 量 让 该 图 层 自 














动 调整 大 小 ， 不 会 自动 断 行 。 而 固定 宽度 则 表示 文本 内 容 超 过 现 有 的 宽度 时 会 自动 





断 行 ， 以 增加 长 度 的 形式 显示 。 


Spacing 《间距 ) 可 以 设置 文本 间距 ，3 个 输入 框 的 数值 分 别 表示 字符 的 间隔 、 


行 高 和 段落 间 的 间隔 。 
文本 图 层 的 其 他 属性 和 普通 图 层 属性 类 似 。 


4. 画板 的 检查 器 
选中 某 一 画板 ， 图 层 属性 面板 变 成 图 9.37 所 示 的 样式 。 
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该 处 下 面 3 个 复 选 框 的 作用 分 别 是 修剪 透明 像素 、 只 导出 图 层 组 和 背景 色 。 


最 常用 的 是 背景 色 。 虽 然 我 们 在 Sketch 界面 中 看 到 的 是 


白色 背景 ， 实 际 上 如 果 





此 处 没有 勾 选 背景 色 的 话 , 是 透明 的 。 导出 为 PNG 格式 的 话 , 也 同样 以 透明 背景 导出 。 


在 右 侧 检查 器 中 最 下 方 ， 是 Make Exportable 〈 生 产 导出 
功能 将 在 9.5.2 小 节 进 行 介绍 。 


) ， 即 导出 功能 。 这 一 


到 目前 为 止 ， 我 们 已 经 大 致 了 解 了 Sketch 的 基本 组 成 和 基本 使 用 方式 。 下 一 小 





节 将 带领 大 家 从 零 开始 设计 一 个 界面 ， 让 大 家 在 实际 设计 中 深入 了 解 各 功能 的 作用 。 


9.2.4 使 用 Sketch 进行 UI 界面 设计 实例 





本 节 将 通过 一 个 简单 的 实例 来 介绍 Sketch 在 日 常设 计 中 的 使 用 。 


Step01 回 到 Sketch， 之 前 通过 快捷 键 A 新 建 了 一 个 让 hone 6 尺寸 的 画布 ， 现 在 
我 们 将 其 重 命名 为 Welcome_Page。 在 Sketch 中 ， 上 默认 最 后 新 建 的 画布 在 图 层 列表 





排 在 最 前 ， 如 图 9.38 所 示 。 
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9.38 


Step02 在 画布 中 单 击 信号 栏 ， 然 后 在 右 侧 检查 器 中 ， 选 择 样式 模板 为 Bar/Status 
Bar/Black， 注 意 到 图 层面 板 图 层 组 变 成 紫色 ， 如 图 9.39 所 示 。 





























ec J 


8 

















了 
| 
| 
图 9.39 

Step03 此 时 ， 我 们 可 以 按 住 键盘 上 的 command 键 ， 单 击 任意 画布 中 信号 栏 的 
“Sketch” 文 字 ， 选 中 后 双击 鼠标 ， 将 其 修改 为 “潮流 UI[”， 注 意 因为 中 文字 体 的 
行 高 比 英文 字体 高 ， 需 要 按键 盘 上 的 上 下 方向 键 手动 调整 到 合适 位 置 。 

Step04 可 以 注意 到 ， 当 修改 了 一 个 画布 上 信号 栏 的 文字 ， 另 一 画布 的 文字 也 随 
之 改变 ， 这 便 是 Sketch 中 强大 的 样式 模板 功能 的 体现 ， 如 图 9.40 所 示 。 

在 Sketch 中 ， 我 们 可 以 给 任何 图 层 设置 样式 模板 ， 可 以 创建 样式 或 者 设置 为 当 
前 文件 中 已 经 有 的 样式 。 已 经 设置 好 样式 模板 的 图 层 或 者 图 层 组 ， 只 要 修改 其 中 任 
何 一 个 图 层 ， 该 文件 中 所 有 画布 上 共享 了 该 样式 模板 的 图 层 也 会 随 之 修改 。 在 UI 设 
计 中 ， 特 别 是 多 个 界面 中 含有 相同 元 素 时 ， 如 类 似 信号 栏 ， 使 用 样式 模板 将 极 大 方 
便 后 期 的 修改 。 或 者 为 了 所 有 文本 大 小 样式 统一 ， 也 会 对 其 设置 文本 样式 模板 。 我 
们 在 下 面 会 介绍 到 文字 模板 的 创建 。 
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9.40 


Step05 使 用 工具 栏 的 “Insert>Shape>Rectangle〈 插 入 > 图 形 > 和 矩形 ) ”命令 ， 
或 者 按 下 快捷 键 R， 来 绘制 一 个 矩形 。 如 图 9.41 所 示 。 





9.41 


Step06 此 时 鼠标 变 成 了 一 个 + 号 和 一 个 矩形 组 成 的 光标 ， 在 画布 上 单 击 并 拖 动 
即 可 绘制 矩形 。 和 其 他 软件 〈 如 Photoshop、lllustrator 等 ) 绘制 情况 类 似 ， 按 住 Shift 
键 可 以 绘制 正方 形 ， 按 住 command 键 可 以 以 鼠标 为 中 心 绘制 矩形 ， 也 可 以 使 用 Shift 
和 command 键 。 

Step07 拖 出 任意 大 小 矩形 后 ， 在 右 侧 检查 器 中 设置 画布 大 小 为 375px X 667px。 
注意 ， 如 果 绘 制 矩形 的 时 候 按 住 了 Shift 键 ， 则 在 属性 面板 中 会 自动 锁 住 长 宽 比 ， 设 
置 为 长 方形 时 需要 手动 解锁 。 

Step08 在 Sketch 中 也 可 以 用 手柄 调节 图 形 大 小 ， 注 意 到 选中 该 矩形 的 时 候 ， 边 
框 会 出 现 8 个 方块 ， 鼠 标 移动 到 方块 处 可 以 调整 大 小 。 若 图 形 的 长 宽 比 锁定 ， 拖 动 
进行 大 小 缩放 的 时 候 不 管 有 没有 按 住 Shift 键 都 一 样 会 以 正方 形 缩放 。 要 想 任 意 缩放 ， 
需要 在 检查 器 中 的 尺寸 位 置 ， 将 锁定 的 图 标点 开 。 

Step09 在 画布 中 按 住 图 层 拖 动 则 可 以 任意 移动 该 图 层 ， 在 移动 过 程 中 会 有 红色 
的 辅助 线 出 现 ， 我 们 称 之 为 智能 辅助 线 ， 智 能 辅助 线 的 功能 十 分 强大 ， 能 很 方便 地 
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帮助 我 们 提高 对 齐 的 速度 和 准确 度 。 我 们 将 该 矩形 移动 到 画布 的 左上 角 ， 在 项 部 和 
左边 会 出 现 红色 智能 辅助 线 代表 已 经 和 画布 边框 对 齐 ， 在 属性 中 也 能 看 到 位 置 为 0,0。 
然后 拖 动 右 下 角 的 方块 ， 将 其 大 小 缩放 至 画布 大 小 。 因 为 有 智能 辅助 线 ， 会 有 自动 
吸附 功能 ， 所 以 能 很 方便 和 准确 地 缩放 至 画布 大 小 ， 如 图 9.42 所 示 。 




















图 9.42 


Step10 将 该 矩形 的 边框 去 掉 ， 颜 色 填 充 设 置 为 白色 ， 右 侧 检查 器 属性 设置 如 图 
9.43 所 示 。 
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图 9.43 


下 面 来 介绍 Sketch 中 的 调 色 盘 功 能 。Sketch 具有 十 分 强大 的 调 色 功能 ， 大 家 可 
以 看 到 调 色 板 对 话 框 项 部 有 6 个 圆 角 和 矩形， 当前 选中 会 蓝 色 高 亮 显示 。 从 左 往 右 分 
别 为 纯色 填充 、 线 性 渐变 、 径 向 渐变 、 角 度 渐变 、 图 片 填充 和 杂 色 填充 。6 种 填充 方 
式 的 效果 和 PS 相似 ， 选 择 不 同 的 填充 方式 下 面 的 界面 也 会 发 生 相 应 的 变化 。 
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我 们 先 来 看 纯色 填充 ， 如 图 9.43 所 示 ， 纯 色 填 充 中 ， 上 方 是 颜色 区 域 ， 从 左 往 
右 、 从 上 到 下 分 别 是 同一 色相 的 饱和 度 越 来 越 高 和 亮度 越 来 越 低 。 在 该 矩形 区 域 下 方 ， 
是 Sketch 的 吸 色 工具 ， 单 击 后 鼠标 将 变 成 放大 镜 ， 方 便 精 确 吸 取 颜 色 ， 和 PS 不 同 的 
是 ，Sketch 的 吸取 工具 不 仅 更 加 精确 ， 即 可 以 吸取 不 限于 画布 本 身 的 色彩 ， 而 是 可 
以 吸取 整个 计算 机 全 部 屏幕 的 色彩 。 找 到 需要 吸取 的 颜色 后 ， 单 击 即 可 吸取 该 颜色 。 
在 吸 色 工具 右 侧 有 两 条 可 以 滑动 的 滑动 条 ， 上 面 那 条 用 于 色相 的 调节 ， 下 方 的 是 当 
前 填充 色 的 透明 度 ， 从 左 到 右 分 别 是 完全 透明 和 完全 不 透明 。 而 最 右边 则 是 当前 画 
布 上 所 有 颜色 的 快捷 方式 ， 单 击 该 按钮 ， 可 以 快速 选择 当前 画布 上 所 有 的 颜色 。 

再 往 下 ， 是 精确 的 颜色 值 。Sketch 中 提供 两 种 表示 颜色 值 的 方式 。 左 边 为 十 六 
进 制 表示 ， 即 编程 中 常用 的 #6 位 字母 或 数字 表示 。 中 间 3 个 数值 为 RGB 表示 方式 ， 
分 别 代表 当前 颜色 中 的 红色 通道 、 绿 色 通道 和 蓝 色 通道 的 数值 。 最 右 侧 的 数值 是 当 
前 颜色 的 a 值 ，100 为 完全 不 透明 ，0 为 完全 透明 。 十 六 进 制 和 RGB 方式 二 选 一 ， 
任意 改变 一 种 ， 另 一 种 会 对 应 改变 。 可 以 直接 输入 数值 进行 调整 。 

数值 下 方 是 系统 预 设 的 一 些 颜色 ， 单 击 即 可 快捷 调 取 ， 如 果 需 要 把 自己 调整 好 
的 颜色 加 入 到 快捷 方式 中 , 单 击 后 方 的 “+” 号 即 可 。 如 需 删除 某 一 颜色 的 快捷 方式 ， 
鼠标 移动 到 需要 删除 的 颜色 处 ， 右 键 单 击 并 选择 Remove 〈 移 除 ) 即 可 。 

再 来 看 渐变 方式 的 面板 ，3 种 渐变 方式 调 色 面板 功能 几乎 一 致 ， 如 图 9.44 所 示 。 
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相 比 纯色 填充 ， 上 方 多 了 一 个 调节 渐变 的 工具 ， 渐 变 填充 需要 和 图 层 配合 使 用 ， 








注意 到 图 层 上 方 也 出 现 了 一 条 线段 ， 线 段 两 个 端点 处 有 两 个 小 圆 点 ， 上 方 的 小 圆 点 
对 应 检查 器 中 调 色 板 的 左 侧 ， 下 方 的 小 圆 点 对 应 调 色 板 右 侧 ， 单 击 圆 点 或 者 单 击 调 
色 板 上 左 例 或 者 右 侧 的 滑 块 均 可 。 

在 画布 的 线段 上 任意 地 方 单 击 ， 或 者 在 调 色 板 上 双击 可 以 添加 滑 块 ， 使 渐变 更 
加 多 变 或 者 协调 ， 渐 变 面板 其 他 功能 和 纯色 填充 相似 。 但 是 在 线性 渐变 中 ， 数 值 下 
方 有 一 个 Smooth Opacity (平滑 不 透明 度 ) 功能 ， 勾 选 该 功能 可 以 自动 计算 ， 使 渐变 
颜色 过 渡 得 更 加 和 和谐。 右 侧 可 以 快速 地 调整 渐变 角度 。 在 画布 上 ， 拖 动 渐变 控制 杆 
的 任何 一 个 端点 均 可 以 调整 渐变 角度 和 渐变 范围 。 








图 像 填 充 面板 如 图 9.45 所 示 。 
weoo 测 流 U| 令 9:4TAM 100% i Rotate | 
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图 9.45 


左 侧 是 图 片 的 缩 略图 , 右 侧 上 方 的 按钮 选择 图 片 , 中 间 可 以 选择 是 平 铺 还 是 铺 满 。 
如 果 选 择 平 铺 可 以 在 下 方 调整 图 片 的 显示 大 小 。 杂 色 填充 面板 如 图 9.46 所 示 。 











| Choose Image... 
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图 9.46 


杂 色 填充 面板 比较 简单 ， 只 有 两 个 选项 ， 第 一 个 是 杂 色 类 型 ， 分 别 是 默认 、 黑 
色 杂 色 、 和 白色 杂 色 和 彩色 杂 色 ， 第 二 个 用 于 选择 杂 色 的 强度 。 
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Step11 介绍 完 Sketch 的 调 色 板 ， 我 们 回 到 纯色 填充 ， 将 颜色 设置 为 本 FFFFF 的 
纯 和 白色 。 然 后 将 该 矩形 图 层 重 命名 为 “Mask”， 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 
Use as Mask〈 使 用 蒙 版 ) ， 或 者 单 击 工具 栏 中 的 Mask ( 蒙 版 ) 按钮 ， 如 图 9.47 所 示 。 


























onore uncerymg Mesk | 
图 9.47 
设置 为 蒙 版 后 ， 该 图 层 上 方 所 有 的 图 层 均 只 能 在 该 图 层 区 域内 显示 。 
Step12 插入 一 张 图 片 。 在 Sketch 中 插入 图 片 可 以 使 用 “Insert>Image (插入 > 
图 片 ) ”命令 ， 也 可 以 直接 从 文件 夹 中 拖 到 图 片 到 Sketch 的 画布 中 。 这 里 我 们 直接 
拖 入 图 片 ， 拖 入 后 注意 图 层 的 变化 ， 因 为 之 前 我 们 将 Mask 图 层 设置 为 蒙 版 ， 则 拖 入 











图 9.48 


Step13 如 果 需 要 取消 蒙 版 ， 则 可 在 该 图 层 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 
Ignore Underlying Mask〈 忽 略 下 层 的 蒙 版 ) ， 则 该 图 层 及 该 图 层 以 上 的 所 有 图 层 均 取 
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消 蒙 版 效果 。 或 者 在 蒙 版 图 层 处 单 击 鼠 标 右键 , 在 Use as Mask( 使 用 蒙 版 ) 处 再 次 单 击 ， 
则 取消 所 有 的 蒙 版 效果 ， 如 图 9.49 所 示 。 

插入 的 图 片 比 画布 大 ， 我 们 将 图 片 等 比 缩放 到 画布 大 小 。 

Step14 在 当前 图 层 上 方 添加 一 个 色 块 ， 使 颜色 柔和 一 些 ， 按 下 快捷 键 ， 添 加 
一 个 矩形 ， 调 整 至 画布 大 小 ， 去 掉 描 边 ， 填 充 颜色 值 为 # 2C2C3D， 设 置 透明 度 为 
10%， 将 其 重 命名 为 Color Layer。 

Step15 再 次 添加 一 个 和 矩形， 调整 至 画布 大 小 ， 去 掉 描 边 ， 设 置 线性 渐变 填充 ， 填 
充 为 纯 白 色 50% 透明 度 到 100% 的 渐变 ， 如 图 9.50 所 示 ， 将 其 命名 为 Gradient Layer。 
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9.49 图 9.50 





Step16 在 图 层 列表 中 选中 Mask、Photo、Color Layer、Gradient Layer 4 个 图 层 ， 
右 击 , 在 弹出 的 快捷 菜单 中 选择 Group Selection, 或 者 按 快 捷 键 command+G 进行 编组 ， 
并 将 图 层 组 重 命 名 为 Background。 
Step17 注意 到 之 前 的 信号 栏 不 见 了 ， 这 是 因为 在 Sketch 中 ， 图 层 也 有 上 下 层次 
的 顺序 ， 在 图 层 列表 中 ， 列 表 上 方 的 图 层 或 者 图 层 组 会 覆盖 列表 下 方 的 图 层 。 我 们 
按 住 图 层 ， 可 以 拖 动 来 调整 层级 关系 。 我 们 将 背景 图 层 组 调整 到 最 下 方 。 然 后 在 该 
图 层 组 处 右 击 ， 在 弹出 的 快捷 菜单 中 选择 Lock Layer〔 锁 定 图 层 ) ， 将 该 图 层 锁定 ， 
锁定 的 图 层 或 者 图 层 组 最 右 侧 “显示 / 隐藏 ”提示 图 标 处 ， 会 变 成 一 个 白色 的 锁定 图 
标 ， 表 示 该 图 层 或 者 该 图 层 组 已 经 被 锁定 ， 解 锁 只 需要 再 次 右 击 ， 在 弹出 的 快捷 菜 
单 中 选择 Unlock Layer (解锁 图 层 ) ， 或 者 直接 单 击 白色 的 锁定 图 标 即 可 ， 如 图 9.51 
所 示 。 

Step18 绘制 按钮 。 选择 “Insert>Shape>Rounded”( 插 入 > 形状 > 圆 角 矩形) 命令 ， 
或 者 通过 快捷 键 U， 在 画布 上 新 建 一 个 贺 角 和 矩 形 。 将 其 尺寸 设置 为 315pxX60px。 去 
掉 描 边 ， 填 充 色 值 为 # 术 B3254， 并 将 圆 角 和 矩形 的 半径 设 为 30， 如 图 9.52 所 示 。 

大 家 注意 ， 图 上 按钮 的 周围 有 4 条 显示 边 距 的 智能 辅助 线 ， 按 下 键盘 上 的 option 




















































































































































































































































































































260 





键 便 可 出 现 ， 建 议 大 家 经 常 使 用 这 一 功能 ， 能 在 极 大 提高 效率 的 同时 更 好 地 提升 设 
计 精 准 度 。 











图 9.51 


Step19 将 该 图 层 命名 为 button_solid_bg。 按 下 快捷 键 T， 插 入 文字 ， 并 设置 属性 ， 
如 图 9.53 所 示 ， 按 住 option 键 使 用 智能 辅助 线 精准 和 按钮 居中 对 齐 。 
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Step20 将 按钮 背景 图 
后 单 击 该 按钮 , 选中 该 组 , 按 住 option 键 











log, 然 
所 示 。 











Step21 这 便 是 快速 复制 图 














的 方式 ， 拖 动 图 层 的 


层 
司 时 会 出 现 





智能 辅助 线 ， 并 且 智 能 辅助 线 会 





随 着 鼠标 移动 的 位 置 








动 变换 参 








考 对 象 。 将 复制 的 图 
层 组 的 距离 调整 为 
居中 对 齐 ， 将 该 图 


button_ reg。 











层 组 和 原 图 


20px， 和 画布 
层 组 重 命名 为 


Step22 按 住 键盘 上 的 command 
键 ， 单 击 按钮 文字 外 的 部 分 ， 将 其 
属性 设置 如 图 9.55 所 示 。 

将 红色 设置 为 该 界面 的 主 色 




















调 ， 为 了 避免 重复 吸取 或 者 需要 手 
动 输入 色 值 ， 我 们 可 以 单 击 调 色 板 
中 的 “+” 号 将 该 颜色 存储 下 来 。 














重 命名 为 line_bg。 
Step24 选中 该 图 





Step23 设置 好 后 ， 





将 该 图 层 


层 组 中 的 文 


字 图 层 ， 在 右 侧 将 对 齐 样式 设置 为 











居中 对 齐 ， 这 样 可 以 让 我 们 在 编辑 











文字 的 时 候 ， 一 直 保证 文字 


为 SIGN UP。 
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层 和 文字 





图 层 选中 ， 关 





























fF 编 组 ， 将 组 重 命名 为 button_ 
后 , 拖 动 鼠标 , 复制 该 组 , 如 


图 9.54 
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图 9.55 


居中 ， 将 文字 颜色 值 设置 为 # 术 B3254， 并 将 文字 内 





容 











更 改 
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至 此 ， 界 面 基本 上 设计 完毕 ， 最 终 效 5 还 一 
果 如 图 9.56 所 示 。 

实际 工作 中 ， 一 般 为 了 避免 界面 上 部 
过 空 ， 可 以 将 公司 LOGO 或 者 其 他 有 代表 
性 的 图 片 放置 上 方正 中 间 。 

完成 设计 后 ， 选 中 画布 ， 单 击 右 侧 检 
查 器 中 下 方 的 Make Exportable (生产 导出 ) 
来 导出 图 片 。Sketch 有 非常 强大 且 方 便 的 
导出 图 片 功能 ， 后 面 会 专门 讲解 Sketch 的 
切 图 和 导出 ， 在 此 不 展开 讲述 。 





























SIGN UP 


图 9.56 





@ 9.3 Sketch 渐 入 佳境 一 一 图 标 


本 节 将 向 大 家 介绍 如 何 使 用 Sketch 绘制 图 标 ， 在 使 用 Sketch 绘制 图 标 之 前 ， 建 
议 大 家 仔细 阅读 相关 平台 的 设计 规范 的 图 标 部 分 ， 对 图 标的 尺寸 和 设计 须知 有 一 个 
基本 的 了 解 。 

使 用 Sketch 绘制 图 标 时 ， 布 尔 运算 是 非常 重要 的 工具 ， 下 面 首先 介绍 布尔 运算 
的 相关 知识 。 


9.3.1 布尔 运算 


在 Sketch 中 ， 布 尔 运算 一 共 包括 4 种 ，。 se 二 
分 别 是 合并 、 减 去 顶层、 区域 相交 和 排除 
重 又 。 为 了 便于 理解 ， 我 们 绘制 黄色 和 蓝 
色 两 个 正方 形 , 黄色 正方 形 在 蓝 色 的 下 面 ， 
两 者 有 1/4 的 面积 重 苔 。 上 方 工具 栏 所 示 的 
4 个 按钮 即 布尔 运算 按钮 ， 从 左 到 右 分 别 是 
Union《〈 合 并 ) 、Subtract( 减 去 顶层) 、 
Intersect〈 区 域 相 交 ) 和 Difference (排除 
重 又 ) ， 选 中 多 个 图 层 单 击 相应 工具 即 可 
进行 相应 的 布尔 运算 ， 如 图 9.57 所 示 。 





















































9.57 
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我 们 选中 两 个 正方 形 ， 对 其 作 布 尔 运算 ， 得 到 如 下 效果 。 
(1) 合并 ， 效 果 如 图 9.58 所 示 。 
(2) 减 去 顶层 ， 效 果 如 图 9.59 所 示 。 


布 和 汉阳 ~ [] 
图 9.58 9.59 


(3) 区 域 相交 ,效果 如 图 9.60 所 示 。 
(4) 排除 重 又 ， 效 果 如 图 9.61 所 示 。 


» 口 rectangle 1 了 » BE Rectangle 








ne 


图 9.60 | | | 图 9.61 
我 们 注意 到 , 进行 布尔 运算 后 的 图 层 , 图 层 列表 中 会 自动 将 进行 运算 的 图 层 编组 ， 


将 其 展开 ， 可 以 看 到 项 部 图 层 的 右 侧 有 个 按钮 ， 单 击 即 可 快速 切换 布尔 运算 的 运算 
模式 ， 如 图 9.62 所 示 。 











在 进行 布尔 运算 后 ， 不 同 颜色 的 图 层 将 会 变 成 同一 个 颜色 ， 该 颜色 取决 于 底部 
图 层 的 颜色 。 

利用 布尔 运算 ， 我 们 可 以 快速 地 绘制 出 一 些 特殊 形状 的 图 形 ， 下 面 通过 两 个 图 
标的 实例 让 大 家 对 布尔 运算 有 更 深入 的 了 解 。 
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9.3.2 ”实例 一 : 搜索 图 标的 绘制 


Step01 使 用 快捷 键 0， 新 建 一 个 圆 形 ， 然 后 按 快捷 键 command+C 复制 ， 按 快捷 
键 command+V 粘贴 该 图 层 ， 按 住 command 键 从 中 心 将 其 缩小 。 这 样 我 们 有 了 两 个 
半径 不 同 的 同心 圆 ， 然 后 选中 两 个 图 层 ， 单 击 工具 栏 上 的 Subtract ( 减 去 顶层 ) 按钮 ， 
即 可 得 出 一 个 空心 圆 环 ， 如 图 9.63 所 示 。 

Step02 再 使 用 快捷 键 U， 绘 制 一 个 圆 角 德 形 ， 半 径 设 置 为 与 宽 相等 ， 比 如 
100pxX20px 的 圆 角 矩形 , 设置 圆 角 半径 为 20, 再 将 其 旋转 45”, 并 移动 至 合适 位 置 ， 
如 图 9.64 所 示 。 











Step03 我 们 选中 圆 角 矩 形 和 圆 环 ， 将 其 5 
对 齐 ， 并 进行 Union (合并 ) 布尔 运算 ， 合 i 
并 两 个 图 层 。 此 时 注意 到 圆 环 比 圆 角 和 矩形 细 ， em E 
视觉 比例 不 是 很 协调 。 这 时 候 我 们 可 以 展开 车 
图 层 组 , 将 中 间 的 小 圆 半径 调 小 至 合适 大 小 ， 
如 图 9.65 所 示 。 9.65 

至 此 ， 一 个 搜索 ICON 就 绘制 好 了 ， 为 了 视觉 上 的 平衡 ， 建 议 将 圆 环 的 宽度 和 
放大 镜 手柄 的 宽度 调整 为 一 致 。 


9.3.3 ”实例 二 : 星星 的 绘制 


实际 上 ， 很 多 图 形 都 是 由 几 个 基本 几何 图 形 组 成 的 ， 运 用 布尔 运算 可 以 快速 绘 
制 出 基本 几何 图 形 以 外 的 图 形 。 

比如 我 们 要 绘制 图 9.66 所 示 的 星星 。 

Step01 从 工具 栏 选择 “Insert>Shape>Star (插入 > 形状 > 星 形 ) ”命令 ， 然 后 绘 
制 一 个 圆 形 ， 将 两 者 上 下 左右 居中 对 齐 ， 使 用 Intersect〈 区 域 相 交 ) 布尔 运算 ， 得 到 
9.67 所 示 形 状 。 

Step02 然后 使 用 快捷 键 0， 绘 制 一 个 圆 ， 与 五 角 星 任意 角 两 边 相 切 ， 并 复制 该 
圆 形 到 其 他 四 个 角 ， 如 图 9.68 所 示 。 

所 有 角 绘 制 好 后 ,选中 所 有 图 层 , 使 用 Union( 合 并 ) 布 尔 运算 , 便 可 绘制 出 该 图 形 。 

布尔 运算 是 非常 重要 的 功能 ， 当 我 们 见 到 好 看 的 矢量 图 形 甚至 是 插画 时 ， 不 妨 
多 分 析 该 图 形 是 由 哪些 基本 形状 组 成 的 。 
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@@ 9.4 Sketch 大 师 之 路 一 一 插件 








Sketch 相 比 其 他 普通 的 矢量 设计 工具 ， 非 常 强大 的 一 点 在 于 Sketch 有 非常 丰富 
的 插件 可 供 使 用 , 灵活 运用 Sketch 的 插件 , 可 以 让 Sketch 在 功能 变 得 异常 强大 的 同时 ， 
还 能 极 大 地 提升 工作 效率 。 

本 节 将 介绍 Sketch 的 插件 获取 方式 ， 以 及 常用 插件 的 推荐 。 

下 面 讲解 Sketch 的 插件 的 获取 和 安装 。 

说 到 Sketch 的 插件 , 不 得 不 提 到 Sketch Toolbox 这 一 专门 管理 Sketch 插件 的 软件 ， 
在 该 软件 上 ， 可 以 快速 方便 地 查找 Sketch 的 插件 。 

Step01 在 浏览 器 中 输入 网 址 http://sketchtoolbox.com/， 打 开 Sketch Toolbox 的 官 
网 ， 单 击 Download the beta 〈 下 载 测试 ) 按钮 进行 下 载 ， 如 图 9.69 所 示 。 






























































































































































Step02 将 下 载 的 ZIP 文件 进行 解压 ， 并 将 解压 出 来 的 应 用 文件 拖 入 “应 用 程序 ” 
文件 夹 即 可 完成 安装 ， 如 图 9.70 所 示 。 





This is what it does for you= 
1 Lets you browse the most popular plugins available for Shetch. 
2 Downloads and installs new plugine with a single click 


3. Automatically keeps all those plugins up to date. 


And heres whats coming soon: 


1 Better organization and metadata foreach plugin_ 
人 3 三 团 ,o 下、 


2, Sor ins by newest, most starred, and currently trending. 





人 天 
3 Customize keyboard shorleuts for all your plugine. 网 rprop ce 
办 加 
Wren all el vn i pe er 扫 汪 本 二 oo 
转 g 而 
图 9.69 9.70 











Step03 在 应 用 程序 中 打开 Sketch Toolbox， 它 的 主 界面 非常 简洁 ， 上 方 是 刷新 按 
钮 、 所 有 插件 和 已 经 安装 插件 的 列表 ， 以 及 最 右边 的 搜索 功能 ， 如 图 9.71 所 示 。 
Step04 可 以 通过 搜索 框 快速 找到 需要 的 插件 ， 然 后 在 搜索 结果 中 ， 单 击 列表 右 
边 的 Install (安装 ) 按钮 即 可 完成 安装 。 当 按钮 显示 为 Uninstall( 印 载 ) 时 ， 便 安装 
成 功 ， 如 图 9.72 所 示 。 
Sketch 的 插件 非常 多 ， 如 何 快速 找到 自己 所 需要 的 插件 呢 ? 有 个 很 好 的 方法 ， 
是 在 搜索 栏 中 搜索 的 时 候 使 用 关键 词 ， 如 图 标 功能 ， 可 以 搜索 关键 词 为 icon 等 。 
安装 完 的 插件 ， 可 以 在 Sketch 菜单 中 的 Plugins〈 插 件 ) 找到 。 




























































































四 国外 Sketch Toolbox 


9 PRM "saed 





Aeflowchart 


This plugin makes it fast and easy to draw flowcharts in Vien Gt 


Sketch 
真 0 ® tadija 


Aeiconizer 


A Sketch plugin that automatically resizes artwork for View on Olt 


ios app icon. 
广 0 ® tadija 


Align To Layer 


Sketch plugin to align selected layers to the bottom one. View on Github 


址 0 ® rodio1 


Align Text Baseline Sketch Plugin 


Align text layer vertically based on its baseline and cap View on Github 
height 


育 0 ® soutaro 











9.71 
O00 Sketch Toolbox 
of ~ BT [ Q Search 
Content Generator Sketch Plugin 
Sketch app plugin for generating dummy data such as View on Github 
avatars, names, photos, geo data etc. 6 Iing. 
实 0 图 timuric 
Sketch Notebook 
Sketch Plugin to make documenting design easier. View on Githwb 

[ Uninstall 


请 929 国 marcosvidal 


Sketch Measure 


A measure tool for Sketch.app (think Specctr for Sketch) View on Github 


广 2403 四 utom 


Uninstall | 


图 9.72 


在 Sketch 的 Plugins (插件 ) 菜单 中 
可 以 看 到 ， 上 方 是 已 安装 的 插件 ， 最 下 方 
有 个 管理 插件 的 菜单 ， 单 击 可 以 对 插件 进 
行 管理 ， 如 图 9.73 所 示 。 功 能 和 Sketch 工 
具 栏 类 似 ， 并 且 随 着 Sketch 版 本 的 更 新 ， 
Sketch 自 带 的 插件 管理 功能 会 越 来 越 强 大 。 
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t Insert Layer Type Arrange ENT View Window Hep 

















下 面 重点 介绍 3 个 非常 实用 的 插件 的 使 用 方法 , Sketch 中 优秀 的 插件 远 不 止 3 个 ， 














但 是 笔者 认为 这 3 个 插件 是 使 用 频率 最 高 的 。 

这 3 个 插件 分 别 如 下 。 

。 Sketch Measure (Sketch 测量 ) : 快速 进行 设计 尺寸 标记 和 输出 。 

。 Sketch Notebook (Sketch 笔记 本 ) : 可 以 生成 非常 美观 的 设计 说 明 。 

。 Content Generator Sketch Plugin〈( 内容 生 成 器 Sketch 插件 ) : 可 以 自动 填充 

界面 内 容 。 

下 面 对 每 个 插件 作 简单 介绍 。 

1) Sketch Measure (Sketch 测量 ) 

Sketch Measure (Sketch 测量 ) 插件 内 容 如 图 9.74 所 示 。 

在 使 用 Sketch Measure (Sketch 测量 ) 之 前 ， 必 须要 先 在 图 层 列表 中 选中 需要 进 
行 尺 寸 标 注 的 图 层 或 者 图 层 组 ， 然 后 再 在 “Plugins>Measure (插件 > 测量 ) ”中 选择 
对 应 功能 进行 标注 。 

Step01 第 一 次 使 用 该 插件 需要 对 插件 单位 进行 设置 ， 这 一 单位 决定 了 标注 在 界 
面 上 的 数字 和 单位 ， 以 iPhone 6 设计 稿 为 例 ， 如 果 我 们 用 的 375pxX667px 尺寸 进行 
的 设计 ， 那 么 “@1X ”的 选项 是 正确 的 ， 如 果 我 们 使 用 750px X 1334px 进行 设计 ， 
那么 需要 选择 “Retina@2X ”， 在 标注 中 ,数字 会 自动 缩小 一 半 , 选中 所 需 的 单位 后 ， 
单 击 确定 按钮 即 可 完成 设置 ， 如 图 9.75 所 示 。 

罕 
。 清 选择 你 的 设计 分 辩 素 
人 standard @1x (px) 


个 points @1x (pt) 
Retina @2x (py) 
Retina HD @3x (pt 
人 ULDPleo.75x (dp, sp) 
人 MDpl @1x (dp, sp) 
OHopi @1.5x (dp, sp) 
OxHopl @2x (dp, sp) 








OxxHoP! @3x (dp, sp) 
个 XXXHDPIG@4x (dp, sp) 
TT ubuntu Grid Units (27px) 
[WW ] [ 砚 定 ] 
图 9.74 图 9.75 


Step02 选中 需要 标注 尺寸 的 图 层 或 者 图 层 组 ， 选 择 “Measure>Create overlay 
(测量 > 创建 覆盖 ) ”命令 ， 可 以 标注 可 点 击 区 域 。 
Step03 选择 第 二 项 Measure size〈 测 量 尺寸 ) 可 以 快速 标注 尺寸 ， 选 择 第 三 项 
Measure spacing〔 测 量 间 距 ) 可 以 快速 标注 该 图 层 四 周 的 距离 ， 如 图 9.76 和 图 9.77 
所 示 。 
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上 BM LEFTse4259.. 8 | 
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上 MM woT™isE425.. 
上 MM ovenLAvenys- 
用 boo 

上 图 bouton og 

» 天 Status Bar Black 
上 MM Bockground 





















图 9.77 


Step04 每 个 尺寸 都 是 一 个 独立 的 图 层 组 ， 可 以 选中 后 移动 到 合适 的 位 置 ， 方 便 
开发 查看 ， 我 们 选择 第 四 项 Get property (Get 属性 ) ， 可 以 快速 标注 选中 图 层 属性 ， 
在 第 一 次 选中 该 选项 时 ， 会 弹出 属性 设置 对 话 框 ， 如 图 9.78 所 示 。 

Step05 勾 选 需要 标注 的 属性 内 容 和 显示 的 位 置 ， 按 “确定 ”按钮 即 可 标注 属性 。 


第 五 项 Createnote《〈 创 建 笔记 ) ， 可 以 快速 创建 标注 ， 需 要 大 量 标注 时 推荐 使 用 。 























第 六 项 和 第 七 项 分 别 是 标注 尺寸 的 百分比 和 标注 间距 的 百分比 ， 和 第 二 、 三 项 
类 似 ， 但 是 单位 是 %， 这 一 标注 在 进行 响应 式 设计 的 时 候 非常 有 用 。 























最 后 ， 强 烈 推荐 大 家 使 有 
出 规范 。 
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倒数 第 二 项 Spec export (说 明 输 出 ) 功能 ， 快 速 输 








Color format: 





>] 
取消 ] [ 确定 
图 9.78 


| Color hex, E.g. AFFFFFF 100% 





Step06 选中 整个 Artboard。 

选择 “Plugins>Measure>Spec export〈 插 件 > 测量 > 说明 输 出 ) ”命令 ， 在 弹出 
的 对 话 框 中 选择 规范 需要 保存 的 位 置 和 文件 夹 名 字 ， 即 可 生成 规范 。 打 开 生 成 的 文 
件 夹 ， 通 常会 看 到 一 个 html 文件 和 一 个 slices 文件 夹 ，html 文件 即 设计 规范 ，slices 
是 该 插件 进行 的 自动 切 图 。 

Step07 双击 打开 html 文件 ， 即 可 查看 规范 。 单 击 需要 查看 规范 的 图 层 ， 即 可 
在 右 侧 看 到 相应 属性 ， 鼠 标 在 图 层 周围 移动 ， 即 可 看 到 间距 。 单 击 顶 部 右 方 的 
Standard〈 标 准 ) 可 以 快速 进行 单位 的 切换 ， 通 过 Color Hex〔〈 颜 色 的 十 六 进 制 ) 可 
以 切换 颜色 的 标注 是 用 十 六 进 制 还 是 RGB 格式 显示 等 ， 如 图 9.79 所 示 。 


Worcome roge 9 cm 








图 9.79 
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2) Sketch Notebook (Sketch 笔记 本 ) 
Step01 可 以 通过 Sketch Notebook 
(Sketch 笔记 本 ) 插件 快速 创建 标 
注 ， 并 且 使 标注 显示 非常 美观 和 清 
晰 。 选 中 需要 标注 的 Artboard， 选 择 
“Plugins>Notebook>Add Comment ( 插 
件 > 笔记本 > 添加 注释 ) ”命令 ， 在 弹 
出 的 对 话 框 中 ， 分 别 输入 标题 和 内 容 即 
可 快速 创建 标注 如 图 9.80 所 示 。 
Step02 可 以 在 画布 中 看 到 插件 自 
动 在 该 Artboard 旁边 创建 了 一 块 标注 区 
域 ， 该 区 域内 容 可 以 随意 进行 修改 ， 和 
使 用 Sketch 进行 设计 无 异 ， 如 图 9.81 
所 示 。 






























































又 
































和 @ WU 全 4 





LOGIN 


图 9.81 


需要 隐藏 标注 的 时 候 , 只 需 选 中 Artboard, 然后 在 菜单 中 选择 “Plugins>Notebook> 














Set comment titie and content for “Welcome_Page” 


避 





Te 
Welcome_Page 
Comment 


Just another comment 


Cancel 


图 9.80 


Welcome_Page 

















OK 














Toggle Notes Visibillity (插件 > 笔记 本 > 切换 笔记 可 见 性 ) ”命令 即 可 ， 需 要 再 次 显 











示 ， 再 一 次 选择 该 命令 即 可 。 
3) Content Generator Sketch Plugin ( 











内 容 


安 咱 





Content Generator Sketch Plugin (内 
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合 44 





生成 器 Sketch 插件 ) 

















生成 器 Sketch 插件 ) 可 以 








动 填充 和 出 























内 容 ， 


第 9 章 Sketch 学 习 捷径 


包括 图 片 和 文字 。 


























我 们 在 进行 界面 设计 的 时 候 ， 为 了 达到 更 好 的 视觉 效果 ， 如 进行 列表 设计 时 需 
要 不 同 的 头像 和 名 字 ， 如 果 逐 个 去 找 常常 会 花费 很 多 时 间 ， 使 用 该 插件 则 可 以 快速 


搞定 。 









































Step01 如 图 9.82 所 示 ， 我 们 需要 给 每 个 头像 填充 不 同 的 图 片 ， 选 中 需要 填充 头 
像 的 圆圈 ， 选 择 “Plugins>Content Generator Sketch Plugin>Persona>Photos>Female/ 
Male/Neurtal (插件 > 内容 生成 器 Sketch 插件 > 图片 > 女性 /男性 /中 性 ) ”命令 ， 


























即 可 





动 填充 图 片 。 














Type Arrange EE View Window Help 


t Generator Sketch Plugin 





面 Measure 





» 
> 局 1 
人 | Notebook 上 » 加 二 有 
200 -200 | Custom Plugin.. OK | Photos P| Names > oo 700 
Run ‘Nature and urban' Again ^OR | Text Ls Female 
Manage Plugins... Eee 


Step02 选中 所 有 的 Type something， 使 用 菜 
单 中 的 “Plugins>Content Generator Sketch Plugin 
>Persona>Names〈 插 件 > 内 容 生 成 器 Sketch 插 
件 > 女 性 > 名 称 ) ”命令 ， 即 可 快速 添加 名 字 ， 
如 图 9.83 所 示 。 





Type something 
Type something 


9.82 








A 
从 Sara Gordon 





该 插件 还 可 以 快速 添加 电子 邮件 、 地 址 ， 鸭 randywes 


随机 4 





E 成 一 段 文本 , 风景 图 片 填充 等 , 自行 尝试 ， 


遗憾 的 是 , 该 插件 填充 的 文字 内 容 只 支持 英文 。 者 oianeDanias 








以 上 是 笔者 特别 推荐 的 3 个 插件 的 使 用 方才 owsten ossne 
法 ， 相 信 大 家 已 经 发 现 Sketch 的 插件 是 非常 强 © Gerald Ramirez 




















大 而 且 非 常 实 用 的 ， 大 家 平时 可 以 多 看 看 相关 


介绍 ， 























找到 适合 自己 的 插件 ， 提 升 工 作 效率 。 。 独 sitew rolen 





























借助 插件 更 加 轻松 高 质量 地 完成 工作 。 人 sobby Homes 


@ arianLane 
@ Sandra Sims 
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@@ 9.5 Sketch 的 切 图 、 导 出 和 资源 推荐 
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Sketch 设计 完成 


E= 














































































































设计 师 需要 将 设计 图 导出 移交 给 开发 人 员 ， 在 Sketch 




























































































已 ， 
中 可 以 很 方便 地 进行 切 图 和 导出 。 
9.5.1 Sketch 的 切 图 
当 所 有 的 界面 设计 完成 后 ， 就 需要 进行 切 图 。Sketch 具有 非常 智能 的 切片 工具 ， 
快捷 键 为 S， 或 者 可 以 单 击 工具 栏 上 的 国 〈 切 片 工具 ) 进行 切片 。 
Step01 选中 切片 工具 后 ， 在 画板 上 单 击 即 可 智能 地 切 出 该 区 域 ， 如 图 9.84 所 示 。 
Step02 也 可 以 在 画板 上 按 下 鼠标 左 键 并 拖 动 划 出 切片 区 域 ， 拖 动 时 可 以 按 住 
Shift 键 拖 出 正方 形 区 域 ， 如 图 9.85 所 示 。 
sis 
» Sara Gordon 器 ee 
击 Randy West 和 
者 oaneoanies ee 
ES Christian Gardner ee 
@@ Gerald Ramirez 可 Ca 
@ Brittany Holland ER 
@) gobby homes 各 ER 
eranLane Watcome Pooe 
@ sansin: Ss 
图 9.84 
Step03 若 切 图 中 出 现 透明 像素 ， 如 图 9.85 右 侧 检查 器 中 预览 图 的 左 侧 所 示 ， 则 
可 以 单 击 检查 器 中 的 Trim Transparent Pixels 〈 修 剪 透明 像素 ) ， 自 动 对 透明 像素 进行 
处 理 ， 如 图 9.86 所 示 。 Eee 
Step04 切片 图 层 在 图 层 列 表 
中 的 显示 如 图 9.87 所 示 ， 图 标 由 
虚线 框 加 刀 型 图 标 组 成 。 
-3 Contacts 
: yslice2 
图 9.86 9.87 
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9.5.2 ”Sketch 的 导出 
Sketch 具有 非常 强大 的 导出 功能 ， 既 可 以 将 切片 导出 ， 也 可 以 将 图 层 或 图 层 组 








导出 ， 同 时 也 能 将 画板 导出 。 

Step01 选中 需要 导出 的 图 层 或 图 层 组 , 单 击 右 侧 检查 器 下 方 的 Make Exportable( 生 
产 导出 ) 按钮 ， 单 击 后 检查 器 下 方 界面 ， 如 图 9.88 所 示 。 
因为 Sketch 是 全 矢量 软件 ， 所 以 可 以 导出 任何 尺寸 ， 都 不 会 影响 清晰 度 ， 在 
Size〈 尺 寸 ) 处 可 以 设置 导出 尺寸 ，1X 为 一 倍 大 小 ，2X 为 2 倍 大 小 。 因 为 我 们 使 
用 1 倍 尺 寸 进行 设计 ， 所 以 导出 为 Phone 4/4s/5/5s/6/6s 尺寸 时 需要 选择 2X 尺寸 ， 
导出 为 iPhone 6 Plus 和 iPhone 6s Plus 时 需要 选择 3X 尺寸 。 

Suffix (后缀 ) 处 在 选中 2X 及 以 上 倍数 时 会 自动 添加 相应 后 级 。 需 要 注意 的 是 ， 
若 设计 时 使 用 了 2 倍 尺 寸 进行 设计 , 则 导出 时 应 选中 1X 尺寸 , 但 是 仍 需 要 在 Suffix( 后 
缀 ) 处 加 上 @2X。 

Format〔 格 式 ) 处 可 以 选择 导出 格式 ，Sketch 支持 导出 为 PNG、JPG、TIFF、 
PDF、EPS 和 SVG6 种 格式 ， 一 般 情况 下 导出 为 PNG 格式 即 可 ， 且 PNG 格式 支持 透 
明 通 道 。 

Step02 确定 好 导出 尺寸 后 ， 单 击 Export X X X〈 导 出 X X xX) 按钮 即 可 导出 ， 
X X X 为 选中 的 图 层 名 字 ， 若 选择 JPG 格式 ， 在 导出 时 会 出 现 如 图 9.89 所 示 的 JPG 
质量 选项 。 






































transparency. 
pixels will turn white instead. If you want 
transparency in your images, save as PNG instead, 




















Export 7 
Bitmaps: “Save for Web 
[x 国 |voe rvs 加 x Color protle and EXIF metadata wil 
Size Suffix Format 
Export bounds [| 掉 ] _Cancel | 国 BE 
图 9.88 图 9.89 





首先 是 JPG Quality，100% 为 最 高 质量 ， 一 般 建议 在 90% 以 上 。 然 后 下 方 提醒 
JPG 不 支持 透明 通道 ， 图 层 透 明 部 分 会 用 白色 纯色 替代 。 如 果 需 要 透明 度 ， 需 要 保 
存 为 PNG 格式 。 义 选 下 方 的 Save for Web 〈 保 存 为 网 页 ) 后 ， 会 将 图 片 在 不 影响 清 
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晰 度 的 情况 下 进行 压缩 ， 去 掉 图 片 的 























如 EXIF 


信息 等 ， 若 是 进行 Web App 或 者 网 页 设计 ， 











Step03 在 进行 导出 设置 时 ， 单 击 Export 

































































〈 导 出) 右 侧 的 + 号 按钮 ， 可 以 一 次 性 导出 
多 种 尺寸 和 格式 的 图 片 ， 如 图 9.90 所 示 。 

在 导出 时 若 多 选 图 层 后 单 击 “ 导 出 ” 按 
钮 ， 则 会 同时 导出 多 个 图 层 ， 若 希望 多 选 的 
图 层 导 出 为 一 个 文件 ， 需 要 将 这 些 图 层 进行 
编组 后 ， 选 中 图 层 组 再 进行 导出 。 























9.5.3 ”Sketch 的 导出 小 技巧 


A 十 


rye 加 x 


Export 


2x @2x JPc6 图 x 

3x @3x nF 加 x 
1.5x @1.5x | | PDF x 

0.5x e@o.sx || EPs 回 x 
Size Suffix Format 


Export bounds 由 


图 9.90 






















































































除了 上 述 常规 的 导出 方式 外 ， 还 有 几 种 方法 可 以 将 图 层 快速 导出 。 
方法 一 : 图 层 列表 拖 动 导出 
在 图 层 列表 中 选中 需要 导出 的 图 层 或 者 图 层 组 ， 按 下 鼠标 并 将 其 拖 动 到 Sketch 
窗口 以 外 的 地 方 释放 局 标 ， 即 可 在 释放 鼠标 的 地 方 导出 该 图 层 ， 如 图 9.91 所 示 。 
回 - 画 了 9 国 . -Qt+ ww 转 
页 ~ 一 9 100 200 300 
加 esxemw a 
~ Ustpaoe 
了 contacts o Pa 
Nphe Ber aa 
》 Ne 8 
» Ml contacts A 
图 contscts 移 saneo 
» 加 oveer 8 
加 contacts Er Randy West 
加 contacts B 
图 contect 中 iane Daniels 
» Ml oivider s 全 . 
» DM contscts christian oardner 
» Ml Contacts 
» 用 Contects 人 Or ald Ramirez 
» BM contacts c 
: ee 8 @ eritany toans 
» MM Navigation Bar Bobby Holmes 
7 i ns 0 Brian Lane 
。 ee ©@ Sandra Sims 
图 9.91 
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方式 二 : 检查 器 中 缩 略 图 拖 动 导出 

选中 需要 导出 的 图 层 或 者 画板 ， 单 击 右 侧 检查 器 底部 的 Make Exportable〈 生 产 
导出 ) 按钮 ， 则 可 以 在 检查 器 面板 中 看 到 该 选中 图 层 导出 成 位 图 的 缩 略 图 ， 如 图 9.92 
所 示 。 

















Friends Recommend Group Chat 








九 
Ey 
FE 
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{© Gerald Ramirez 
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9.92 


此 时 用 鼠标 在 缩 略 图 处 按 下 并 拖 动 到 Sketch 窗口 以 外 的 地 方 ， 释 放 鼠 标 ， 则 会 
在 释放 处 创建 该 选中 图 层 或 画板 的 位 图 文件 ， 如 图 9.93 所 示 。 

以 上 两 种 方法 导出 图 层 的 尺寸 取决 于 单 击 Make Exportable (生产 导出 ) 按钮 
设置 的 尺寸 ， 如 图 9.93 所 示 ，Size (尺寸 ) 为 1X 时 拖 蝶 出 来 导出 的 图 层 大 小 为 1 
倍 大 小 ， 若 没有 进行 设置 则 默认 为 1 倍 大 小 。 

若 往 Sketch 画布 上 拖 搜 ， 则 会 在 画布 上 创建 一 个 位 图 图 层 。 

在 Sketch 中 , 导出 图 层 时 除了 可 按照 倍数 进行 设置 , 也 可 以 导出 指定 大 小 的 图 层 ， 
如 图 9.94 所 示 ， 在 Size〈 尺 寸 ) 处 输入 800w， 则 表示 导出 宽 为 800px 的 位 图 ， 若 是 
800h， 则 表示 导出 高 为 800px 的 位 图 ， 宽 和 高 的 数值 只 能 输入 一 个 ， 另 外 一 个 会 根据 
比例 自动 进行 缩放 。 





mm 
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. 
机 
可 
站 
© 
和 
® 
@ 


Export 十 


[aoow 尼 PNc 固 x 


Size Suffix Format 


Export List_Page 由 





图 9.93 图 9.94 


9.5.4 ”Sketch 的 资源 推荐 


课程 讲 到 这 里 ， 基 本 上 就 结束 了 ,大 家 应 该 可 以 使 用 Sketch 开始 进行 UI 设计 了 ， 
但 是 要 熟练 掌握 Sketch， 还 需要 多 多 练习 。 

最 好 的 练习 办 法 ， 就 是 临摹 优 秀 的 作品 ， 随 着 Sketch 的 影响 力 越 来 越 大 ， 互 联网 
上 已 有 大 量 Sketch 格式 的 UI 设计 源 文件 供 大 家 下 载 参 考 。 其 中 Sketch.im 是 国内 做 得 
比较 好 的 Sketch 资源 站 ， 在 这 个 网 站 可 以 很 方便 地 下 载 到 非常 多 的 Sketch 源 文件 。 

下 载 到 源 文件 后 ， 如 何 对 源 文件 进行 分 析 和 临摹 呢 ? 

我 强烈 建议 大 家 将 每 个 图 层 点 开 进行 查看 , 重点 查看 右 侧 检查 器 中 的 属性 设置 ， 
看 看 填充 色 、 不 透明 度 、 阴 影 等 设置 ， 然 后 思考 为 什么 要 这 么 设计 ， 如 果 去 掉 阴 影 
会 怎么 样 等 ， 如 图 9.95 所 示 。 












































图 9.95 


相信 和 经 过 多 次 的 分 析 和 临摹 ， 大 家 不 仅 可 以 熟练 掌握 Sketch，UI 设计 水 平 也 将 
会 有 一 个 质 的 飞跃 。 
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@ 10.1 VR 技术 及 其 发 展 历史 


VR (Virtual Reality， 即 虚拟 现实 ， 简 称 VR) 技术 也 称 灵 境 技术 或 人 工 环境 ， 
其 定义 是 集合 仿真 技术 、 计 算 机 图 形 学 、 人 机 接口 技术 、 多 媒体 技术 、 传 感 技术 及 
网 络 技术 等 多 领域 技术 而 开发 出 来 的 一 种 计算 机 仿真 系统 ， 能 够 创建 并 让 用 户 感受 
原本 只 有 在 真实 世界 才 会 拥有 的 体验 ，VR 涉及 的 触觉 感官 如 图 10.1 所 示 。 
VR 发 展 历史 如 下 。 
1960 年 ， 电 影 摄影 师 Morton Heilig 提交 了 一 款 VR 设备 的 专利 申请 文件 ， 专 利 
文件 上 的 描述 是 “用 于 个 人 使 用 的 立体 电视 设备 ”， 如 图 10.2 所 示 。 
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(CPU) @ 





图 10.1 图 10.2 


1967 年 ，Heilig 又 构造 了 一 个 多 感知 仿 环境 的 虚拟 现实 系统 Sensorama 
Simulator， 这 也 是 历史 上 第 一 套 VR 系统 ， 它 能 够 提供 真实 的 3D 体验 。 

1968 年 ， 美 国 计 算 机 图 形 学 之 父 Ivan Sutherlan 在 哈佛 大 学 组 织 开发 了 第 一 个 计 
算 机 图 形 驱动 的 头盔 显示 器 HMD 及 头 部 位 置 跟踪 系统 ， 是 VR 发 展 史上 一 个 重要 的 
里 程 碑 ， 如 图 10.3 所 示 。 

1989 年 ，Jaron Lanier 首次 提出 Virtual Reality 的 概念 ， 被 称 为 “虚拟 现实 之 父 ” 

1991 年 ， 一 款 名 为 “Virtuality 1000CS” 的 设备 出 现在 消费 市 场 中 ， 由 于 它 笨重 
的 外 形 、 单 一 的 功能 和 昂贵 的 价格 ， 并 未 得 到 消费 者 的 认可 ， 但 掀起 了 一 个 VR 商业 
化 的 浪潮 ， 世 嘉 、 索 尼 、 任 天 堂 等 都 陆续 推出 了 自己 的 VR 游戏 机 产品 。 但 这 一 轮 商 
业 化 热潮 ， 由 于 光学 、 计 算 机 、 图 形 、 数 据 等 领域 技术 未 得 到 高 速 发 展 ， 产 业 链 也 
不 完备 ， 并 未 得 到 消费 者 的 积极 响应 ,但 此 后 , 企业 的 VR 商业 化 尝试 一 直 没有 停止 。 

第 三 次 热潮 源 于 2014 年 Facebook 20 ee Oculus，VR 商业 化 进程 在 全 球 
范围 内 得 到 加 速 。 三 星 、HTC、 索 尼 、 雷 蛇 、 佳 能 等 科技 巨头 组 团 加 入 ， 让 人 看 到 
了 这 个 行业 正在 茵 勃发 前 国内 se VR 领域 创业 公司 ， 资 本 不 断 涌 
入 这 个 市 场 ， 科 技 巨 头 拓 VR 领域， 不 断 有 新 的 VR 创业 公司 出 现 ， 覆 盖 全 产业 链 
环节 ， 例 如 交互 、 摄 像 、 现 实 设备 、 游 戏 、 应 用 、 社 交 、 视 频 、 医 疗 等 。2015 年 暴 
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第 10 章 VR 虚拟 现实 ) 和 AR 〈 增 强 现 实 ) 交互 














风 科 技 登 陆 创业 板 , 成 为 “虚拟 现实 第 一 股 ”, 吸引 更 多 创业 者 和 投资 者 进入 VR 领域 ， 





VR 眼镜 如 图 10.4 所 示 。 
By 














图 10.3 图 10.4 


@ 10.2 VR 的 发 展 前 景 及 体系 


10.2.1 VR 的 发 展 前 景 
投资 银行 Digi-Capital 发 布 报告 称 ， 至 2020 年 ， 全 球 AR《〔〈 增 强 现实 ) 与 VR 
(虚拟 现实 ) 市 场 规模 将 达到 1500 亿美 元 。DT 为 全 球 最 大 的 IT 投行 ， 曾 经 投资 过 
Facebook 和 Tiwtter 等 超级 公司 ， 如 图 10.5 所 示 。 
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图 10.5 
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10.2.2 VR 体系 


1. VR 硬件 设备 和 服务 

设备 研发 、 设 施 安装 、 定 制 设 备 、 设 备 调试 、 硬 件 设计 。 

2. VR 系统 平台 和 商城 

HTC Viveport VR 应 用 商店 、Oculus Store、Steam VR 应 用 商店 、 谷 歌 Daydream 
VR 界面 ， 如 图 10.6 所 示 。 


















































| STEAM VR 


ep 


[BeiYel el 


PI AYSTATION VR 





图 10.6 
3. VR 内 容 
VR 可 提供 的 体验 包括 游戏 、 影 视 、 教 育 培训 、 广 告 购物 、 医 疗 、 智 能 导航 等 ， 
如 图 10.7 所 示 。 
































@ 10.3 VR 硬件 及 盈利 模式 


10.3.1 VR 硬件 


前 市 场 上 的 VR 硬件 有 3 大 类 : 主机 VR (电脑 头盔 ) 、 移 动 VR (手机 盒子 ) 
和 VR 一体 机 硬件 头盔 ) ， 如 图 10.8 所 示 。 
Cardboard 可 以 说 是 物美 价 廉 版 VR 的 代表 ， 仅 靠 一 块 纸板 以 及 一 组 透镜 再 搭配 
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交互 


几 个 零件 就 能 组 装 完成 , 价格 在 几 美元 到 几 十 美元 间 , 根据 谷歌 官方 给 出 的 数据 显示 ， 








截至 2015 年 底 ，Cardboard 的 销量 已 突破 500 万 ， 如 图 10.9 所 示 。 




















图 10.8 


Gear VR 是 三 星 与 Oculus 合力 打造 的 一 款 
优质 移动 端 VR 头 显 ， 是 移动 VR 头 显 市 场 中 的 
领导 者 ， 售 价 并 不 高 ， 只 需 99 美元 ， 但 是 相 比 
Cardboard 而 言 ， 给 用 户 带 来 的 体验 却 明显 高 了 
一 个 档次 ， 因 此 它 成 了 很 多 用 户 的 首选 VR 体验 
产品 ， 然 而 Gear VR 目前 最 大 的 缺点 就 是 只 能 支 
持 指 定 的 三 星 旗舰 手机 ， 如 图 10.10 所 示 。 

相 比 移动 端 ， 以 PS4 主机 作为 计算 终端 的 0D 




























































































PSVR， 在 VR 体验 上 明显 又 高 出 不 少 。PS 摄像 头 和 Move 手动 控制 器 ， 再 加 上 一 部 




















PS4 游戏 主机 ， 至 少 约 近 900 美元 ， 不 过 索尼 的 聪明 之 处 在 于 PSVR 能 够 依托 了 
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10.11 所 示 。 
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图 10.11 





FPS4 


行 ， 在 PSVR 推出 之 前 ， 索 尼 就 已 经 拥有 了 近 4000 万 PS4 用 户 ， 如 此 庞大 的 潜在 
户 群体 有 利于 索尼 在 早期 市 场 上 取得 巨大 的 优势 ， 更 有 利于 今后 的 推广 计划 ， 如 
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无 论 是 售 价 600 美元 的 Oculus Rift， 还 是 售 价 800 美元 的 HTC Vive， 搭 配 功 能 
强大 的 个 人 电脑 ， 都 可 以 为 用 户 带 来 高 品质 的 浸入 感 虚拟 现实 体验 ,如 图 10.12 所 示 。 
Oculus Rift 拥有 两 块 1200X1080 像素 、 刷 新 率 为 90Hz 的 OLED 显示 屏 ， 并 
且 内 置 了 陀螺 仪 和 加 速度 计 ， 还 包括 红外 传感器 来 360"” 追踪 头 部 的 动作 。 同 时 
Oculus Rift 内 置 了 耳机 及 麦克 风 ， 重 量 上 也 较 轻 ， 还 可 以 任意 调整 。 
HTC Vive 的 一 大 优势 是 具有 房间 追踪 系统 ， 而 Oculus Rift 仅 依 赖 于 放置 在 桌面 
上 的 单一 传感器 。 在 使 用 中 ， 两 种 设备 的 头 部 跟踪 都 很 流畅 。 但 是 ，HTC Vive 可 以 
为 用 户 带 来 随意 走动 的 室内 虚拟 现实 体验 。 相 比 之 下 ，Oculus Rift 仅 支 持 用 户 从 椅子 
上 站 起 来 ， 在 桌 前 有 限 范围 的 活动 。 
HTC Vive 为 用 户 带 来 的 沉浸 式 体验 更 强 ， 更 具有 进入 虚拟 现实 的 感觉 。 用 户 可 
以 通过 HTC Vive 触 磁场 景 中 的 物体 ， 或 者 在 游戏 中 通过 真实 手势 进行 交互 。 
决定 沉浸 体验 感 好 坏 的 因素 之 一 是 视 场 角度 。 人 眼 正 常 的 视 场 角度 是 200 度 左 
右 ， 视 场 角度 越 大 ， 沉 浸 感 越 好 。 目 前 大 部 分 产品 的 视 场 角 约 在 110 ~ 120 度 ， 而 
且 眼 睛 盒子 比 PC 头 显 的 视 场 角度 更 低 ， 沉 浸 感 更 差 ， 如 图 10.13 所 示 。 
避 a 所 aln 


图 10.12 图 10.13 


10.3.2 ”VR 的 盈利 方式 


VR Store (app) : 下 载 付费 、 应 用 内 付费 、 赞 助 开发 ; 

游戏 :下载 付费 、 时 长 付费 、 游 戏 道 具 付 费 ; 

视频 : 版 权 内 容 分 发 、PGC 内 容 (全 称 : Professional Generated Content) ， 互 
联网 术语 。 指 专业 生产 内 容 按 点 播 付费 、UGC (User Generated Content) 网络 术语 ， 
指 专业 生产 的 内 容 片 头 广告 ; 
告 : 广 点 通 广告 主 资源 导入 、 不 同形 式 的 分 成 机 制 和 流量 主 模式 。 
















































































































































































































































































HTC Vive 

































































@ 10.4 VR 交互 


如 同 平面 时 代 的 图 形 界面 交互 ， 会 在 不 同 的 场景 下 有 不 同 的 表现 形式 ，VR 交互 
同样 不 会 只 有 唯一 通用 的 交互 手段 。 
同时 ，VR 的 多 维特 点 注定 了 它 的 空间 交互 要 比 平面 图 形 交 互 拥 有 更 加 丰富 的 形 
式 。 目 前 ，VR 交互 形式 仍 在 探索 和 研究 中 ， 通 过 与 各 种 高 科技 结合 ， 会 给 VR 交互 
带 来 无 限 可 能 。 

VR 交互 隐喻 的 两 个 目标 是 “替代 ”与 “超越 ”。 
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作为 VR 交互 ， 首 先 要 能 够 完成 目前 平面 图 形 交互 的 所 有 功能 ， 如 单 击 、 滑 动 、 
滚动 、 拖 忠 ， 操 作 键 盘 ， 也 就 是 “替代 ”。 

第 二 个 目标 就 是 “超越 ”， 能 够 完成 在 平面 图 形 、 甚 至 在 现实 世界 中 所 无 法 完 
成 的 功能 

比如 空间 交互 ， 包 括 模拟 触觉 、 光 电 定 位 、 体 感 控 制 、 手 势 识别 、 语 音 控制 、 
场景 模拟 等 。 

VR 的 9 种 常用 交互 如 下 。 

1. 动作 捕捉 








世界 ， 























前 专门 针对 























景 中 使 





户 想 要 获得 完全 的 沉浸 感 ， 真 正 “ 进 入 ” 虚 扑 
VR 的 动 捕 系统 ， 分 为 昂贵 的 商 
的 动作 捕捉 ， 其 实 动作 捕捉 在 电影 特效 技术 上 已 














动作 捕捉 系统 是 必须 的 。 








级 设备 及 些 部 分 功能 的 特定 场 


























因 其 所 





有 的 








类 设备 因 其 
相 比 之 
有 起 来 反而 显得 更 方便 实用 ， 
2. 触觉 反馈 
这 上 
目前 








多 














[a 

















LL 

















性 i ] 槛 ， 而 安 证 


主要 指 的 是 按钮 和 振动 反馈 ， 这 就 是 下 面 要 提 到 
三 大 VR 头 显 厂商 Oculus、 索 
手柄 作为 实现 标准 交互 模式 的 设备 ， 两 手 分 立 的 、6 个 








田 





户 花费 比较 长 





VR 动作 系统 如 图 10.14 所 示 。 





已 经 得 到 了 广泛 应 
的 时 间 穿戴 和 校准 才能 够 使 
Kinect 这 样 价格 便宜 的 光学 设备 在 某 些 对 于 精度 要 求 不 高 的 场景 应 


尼 、HTC Valve 都 不 约 而 同 地 采 

















， 但 是 




















的 一 大 类 ， 虚 拟 现实 手柄 。 




















了 虚拟 现实 




















度 空间 跟踪 的 〈3 个 转动 
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度 和 3 个 平移 









































图 10.14 


3. 眼球 追踪 
提起 VR 领域 最 











按钮 和 振动 反馈 的 手柄 如 





HH 


重要 的 技术 之 一 ， 眼 球 追 踪 技术 绝对 值得 从 业者 密切 关注 。 


图 10.15 所 示 。 





图 10.15 


眼 





球 追 踪 技 术 的 基本 原理 是 将 一 束 光 打 到 眼球 上 ， 通 过 瞳孔 和 角膜 反射 光 算 法 来 计算 


追踪 视线 。 





眼球 追踪 技术 被 大 部 分 VR 从 业者 认为 将 成 为 解决 虚拟 现实 头盔 有 眩 晶 问题 的 一 









































个 重要 技术 突破 。 难 点 是 如 何 判 定 眼球 的 有 意识 移动 和 无 意识 移动 。 眼 球 追踪 技术 
如 图 10.16 所 示 。 

4. 肌 电 模拟 

VR 拳击 设备 Impacto 结合 了 触觉 反馈 和 肌肉 电 刺 激 精确 模拟 实际 感觉 。 震 动 马 
达 和 肌肉 电 刺 激 两 者 的 结合 能 够 给 人 们 带 来 一 种 “拳拳 到 肉 ” 的 错觉 ， 因为 这 个 设 
备 会 在 恰当 的 时 候 产生 类 似 真正 拳击 的 “冲击 感 ”， 如 图 10.17 所 示 。 
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图 10.16 图 10.17 


5. 手势 跟踪 

手势 跟踪 分 为 光学 跟踪 和 数据 手套 跟踪 ， 光 学 跟踪 的 优势 是 不 需要 在 手 上 穿戴 
设备 ， 缺 点 是 受 场景 限制 。 

数据 手套 则 是 在 手套 上 集成 了 惯性 传 感 
器 来 跟踪 用 户 的 手指 乃至 整个 手臂 的 运动 。 

它 的 优势 在 于 没有 视 场 限制 ， 而 且 完 全 可 
以 在 设备 上 集成 反馈 机 制 〈 比 如 震动 、 按 钮 和 
触摸 ) 。 缺 点 是 穿 脱 不 便 ， 如 图 10.18 所 示 。 


6. 方向 追踪 图 10.18 

方向 追踪 除了 可 以 用 来 瞄 点 ， 还 可 以 用 来 控制 用 户 在 VR 中 的 前 进 方向 。 不 过 ， 
方向 追踪 在 很 多 情况 下 会 受 空间 限制 ， 比 如 无 法 进行 360 度 的 旋转 。 

交互 设计 师 给 出 的 解决 方案 是 单 击 鼠 标 右键 则 可 以 回 到 初始 方向 或 者 叫 作 年 
当前 凝视 的 方向 ， 也 可 以 通过 摇 杆 调整 方向 ， 或 按 下 特定 按钮 回 到 初始 方向 ， 方 向 
追踪 演示 如 图 10.19 所 示 。 

7. 语音 交互 

在 进入 VR 世界 后 ， 如 果 视 觉 界 面 出 现 图 形 提示 则 会 干扰 用 户 沉浸 式 体 验 ， 最 
好 的 解决 方案 是 使 用 语音 。 

进行 语音 交互 更 加 自然 ， 语 音 交互 演示 如 图 10.20 所 示 。 
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图 10.19 





8. 传感器 
传感器 能 够 帮助 人 们 与 多 维 的 VR 信息 环境 进行 自然 地 交互 。 比 如 能 模拟 行走 
的 万 象 走 盘 ， 能 感受 射击 游戏 中 弹 的 感觉 及 微风 吹 过 的 感觉 的 全 身 传 感 设备 。 
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这 些 都 是 由 设备 上 的 各 种 传感器 产生 的 ， 比 如 智能 感应 环 、 温 度 传感器 、 光 敏 
传感器 、 压 力 传感器 、 视 觉 传感器 等 ， 能 够 通过 脉冲 电流 让 皮肤 产生 相应 的 感觉 ， 
或 是 把 游戏 中 触觉 、 嗅 觉 等 感觉 传送 到 大 脑 ， 传 感 器 设备 如 图 10.21 所 示 。 


9. 现实 对 应 空间 地 形 

就 是 造 出 一 个 与 虚拟 世界 的 墙壁 、 障 碍 物 和 边界 等 完全 一 致 的 真实 场地 。 

比如 超重 度 交 互 的 虚拟 现实 主题 公园 The Void 就 采 这 种 途径 ， 它 是 一 个 混 
合 现实 型 的 体验 ， 把 虚拟 世界 构建 在 物理 世界 之 上 ， 让 使 用 者 能 够 感觉 到 周围 的 物 
体 并 使 用 真实 的 道具 ， 比 如 手提 灯 、 剑 、 枪 等 ， 如 图 10.22 所 示 。 
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@ 10.5 VR 项 目 设计 流程 及 应 用 领域 


10.5.1 VR 项 目 设计 流程 


VR 项 目 设计 流程 通常 如 下 。 

市 场 调研 一 产品 定义 一 策划 案 一 市 场 推广 方案 一 项 目 解决 方案 一 确定 使 用 的 引 
人 擎 一 确定 美术 素材 规格 一 确定 编程 语言 一 若是 联网 游戏 则 确定 网 络 协议 服务 器 一 关 
卡 设计 一 游戏 玩法 一 数值 设计 一 建 模 动画 一 场景 搭建 一 开发 测试 一 发 布 运营 。 


10.5.2 ”VR 应 用 领域 


VR 应 用 领域 包括 以 下 几 个 方面 。 
(1) VR 培训 教育 ， 如 幼儿 涂鸦 墙 ， 如 图 10.23 所 示 。 
(2) VR 虚拟 博物 馆 ， 如 图 10.24 所 示 。 
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(3) VR 游戏 ， 如 图 10.25 所 示 。 














(4) 建筑 家 居 ， 如 图 10.26 所 示 。 














图 10.25 


(5) 即时 信息 帮助 、 浏 览 上 网 ， 如 图 10.27 所 示 。 





10.27 


(6) 虚拟 扫墓 见 亲 人 、 主 题 公 园 ， 如 图 10.28 所 示 。 

















图 10.28 
(7) 交通 信息 ， 如 图 10.29 所 示 。 





图 10.29 
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(8) VR、AR 建筑 ， 如 图 10.30 所 示 。 








图 10.31 


(10) VR、AR 运动 ， 如 图 10.32 所 示 。 
(11) AR 立体 读物 ， 如 图 10.33 所 示 。 





(12) AR 立体 广告 单 ， 巩 





图 10.33 


0 图 10.34 所 示 。 











(13) VR、AR 医疗 ， 如 





10.35 所 示 。 











(14) VR、AR 电 商 购物 


， 如 图 10.36 所 示 。 
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10.36 


(15) VR 穿戴 硬件 动作 捕捉 ， 如 图 10.37 所 示 。 
(16) 旅游 体验 ， 如 图 10.38 所 示 。 
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0 a vs -= 
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下 面 将 讲解 动 效 的 一 些 逻辑 原理 。 在 制作 动 效 时 ， 需 要 考虑 以 下 几 点 。 
(1) 需要 加 动 效 的 地 方 。 

(2) 需要 等 待 的 场景 。 

(3) 页 面 转 场 的 场景 。 

(4) 响应 操作 后 有 变化 的 点 。 

(5) 需 提醒 用 户 注意 的 点 。 

(6) 对 操作 流程 有 提示 作用 的 点 。 


从 注意 

在 制作 动 效 时 需要 注意 容易 犯 的 问题 ， 过 多 的 不 必要 的 动 效 会 造成 的 资源 浪 药 
和 满 屏 在 动 的 情况 ， 花 里 胡 哨 。 

在 设计 APP 页 面 或 执行 菜 一 个 动作 时 ， 需 要 考虑 动作 的 次 序 ， 例 如 点 外 卖 时 添 
加 订单 或 删除 订单 的 动作 解析 ， 如 下 图 所 示 。 






























































添加 订单 9 元 


你 确定 删除 所 有 订单 妈 ? 
网 四 四 








动作 解析 
时 间 办 (ns) 上 L 1 1 1 J 加 
0 400 700 920 1200 
编 放 
A 1200ms 
速度 曲线 时 间 
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我 们 常 做 的 动画 类 型 如 下 。 
巴 位 移 的 变化 ，@ 旋 转 的 变化 ; 图 颜色 的 变化 ; @@ 尺 二 的 变化 ; @ 透 明度 的 变 

化 ; @ 生 长 和 裁 切 ，(O 空 间 透视 的 变化 ，@ 一 些 滤 镜 效果 。 
常见 的 动画 效果 类 型 如 下 图 所 示 。 
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交互 动态 特效 可 以 做 出 的 动画 效果 如 下 。 


| 


@ 旋 转 缩放 ， 入 镜 出 镜 ; @@ 压 扁 弹 起 ， 加 速 减速 ，@ 人 靠近 离开 ， 曲 线 运动 ; 
@ 透 明度 变化 ， 移 动 停止 ， 旬 跟随 重 又 ， 轮 廓 残 影 ，@ 拉 扯 抵抗 ， 抛 物 线 运 动 ; 


@ 模 糊 清晰 和 重力 、 风 力 等 等 。 


在 调节 动画 时 ， 为 了 使 动画 更 加 有 节奏 感 ， 通 常会 对 其 动画 曲线 进行 调整 ， 常 





用 的 动画 曲线 类 型 如 下 图 所 示 。 

















